본문 바로가기
HTML5 - 시맨틱 태그 html5로 들어오면서 가장 크게 변한 점 중 하나가 시맨틱 태그를 도입했다는 점이다. 기존의 html은 레이아웃을 짜기 위해 주로 div를 많이 사용했고, 이런 div는 레이아웃을 단지 짜기 위한 공간을 마련할 뿐 어떤 의미론적인 태그도 부여받지 못한다. 시맨틱이란 말그대로 의미론적이라는 뜻이다. 결국은 시맨틱 태그는 의미론적인 태그라는 뜻인데, 이런 시맨틱 태그를 도입하면서 컴퓨터가 정보를 이해하고, 논리적인 추론까지 할 수 있는 구조를 할 수 있게 만들어졌다. 기존에는 header나 content나 footer를 줄 때, 이 부분은 헤더! 이 부분은 섹션! 이 부분은 푸터! 위의 div에 class나 id를 의미적으로 헤더,섹션,푸터를 부여해주면서 레이아웃을 나누곤 했는데 시맨틱 태그로 들어서면 아..
block 태그 vs inline 태그 inline 속성 - 태그가 글씨 써진 넓이만큼 먹는다. - width와 height / margin과 padding이 적용되지 않는다. - text와 관련된 css가 적용된다. - css로 block 요소를 만들 수 있다. *예외적으로 width와 height가 먹는 태그가 존재한다(입력관련 태그나 img 태그) 관련 대표적인 태그: block 속성 -한 줄을 전체 넓이로 간주한다. -width와 height / margin과 padding가 적용되어 지정할 수 있다. - css로 inline 요소를 만들 수 있다. 관련 대표적인 태그: , - inline-block 속성 -inline,block 속성을 합친게 inline-block이다. -width와 height 값을 줄 수 있으며, 지정해주지 않으..
HTML에서 많이 사용하는 태그2 - 텍스트 태그로, 개인적으로는 주로 p태그 안에 많이 넣는 편이다. 이 태그는 텍스트 태그입니다~ - 강조 태그로, 중요한 부분을 강조시키고 싶을 때 사용한다. 이 문장은 매우 중요합니다! - 다른 텍스트에 비해 강조시키고 싶은 부분이 있을때 많이 사용하는데 우리가 교과서를 읽다가도 중요한 부분이 있어서 노란색으로 색칠할 때가 있는데 그럴 때 사용하는 태그이다. 내용을 읽다보면 강조하고 싶은 부분이 생기죠? - 줄바꿈 태그이다. - 우리가 문장을 p태그 안에 넣었는데 중간에 줄바꿈하고 싶을 때 많이 사용한다. 오늘 다시 한 번 확인하는 날이다. 사람이 많아서 확인가능할지 모르겠다. - 우리가 다른 페이지나 다른 사이트로 넘어가고 싶을 때 많이 사용하는 태그이다. 네이버로 이동! - 페이지에 이미지를 게..
HTML에서 많이 사용하는 태그1 ~ - 제목 태그 - heading의 줄임말 -1~6으로 갈수록 크기가 작아진다. 제목 삽입 - 텍스트 태그로, 문장이나 문단을 주로 넣어주는 태그이다. 문장이나 문단 삽입 가능 , -목록을 만들기 위해 만드는 태그이다. - ol은 ordered list로 자동적으로 숫자가 붙어서 나오는 태그이다. - ul은 unordered list으로 자동적으로 동그라미가 붙어서 나오는 태그이다. - 보통은 아래와 같이 태그를 쓰며, li에는 실질적인 내용을 ul과 ol은 그런 li를 감싸준다. 사과 봉숭아 파이썬 자바 dl태그는 정의된 목록을 만드는 태그라 할 수 있다. ul이나 ol같이 dl 태그쓸 때는 dt,dd 태그가 필요하다. dt는 정의되는 용어의 제목을, dd는 정의되는 용의 제목의 설명을 넣어주면 된다..
HTML 기본 태그 html의 기본 구조는 아래와 같다. 독타입은 이 페이지가 무슨 버전은 선언되어 있는지 알 수 있는 태그입니다. 위의 독타입은 html5으로 작성되어 있는걸 알 수 있습니다. html 태그가 오면 html이 시작됐다고 인지하고 구성을 그리기 시작한다. 이 태그 안에 페이지의 기본적인 정보를 모두 넣을 수 있다. title 태그: 사이트의 제목 meta 태그 중 charset: 이 태그를 넣어야 한글을 인식할 수 있다. 넣지 않으면 페이지에서 알 수 없는 글씨들을 볼 수 있다. meta 태그 중 viewport: pc만 생각해서 페이지를 구성했는지 혹은 반응형으로 생각해서 구상했는지 드러난다. 항상 head 태그 뒤에 오며, 이 안에 우리가 넣고 싶은 태그를 활용해 텍스트나 이미지 혹은 비디오등까지 볼 수..
HTML이란? HTML HTML의 풀 약자는 Hypertext Markup Language이며, HTML은 웹페이지를 만들기 위한 언어이며, 웹페이지의 구조를 잡을 수 있기도 하다. html을 작성하기 위해서는 tag를 알아야 작성할 수 있다. 내용 시작 태그를 하면 반드시 끝 태그를 넣어야한다. 예외인 태그도 있는데 이미지태그(img)와 줄바꿈 기능을 하는 태그(br)는 따로 끝 태그를 넣지 않아도 된다. 태그 자체를 요소라고 부르기도 하며, 태그 안에는 속성이 존재한다. 속성 class,href,src,alt 가 대표적인 속성인데, class: class를 선언해주면 css에서 불러와 사용해줄 수 있다. 내용 .class { font-size:10px; } 앞에 태그에서 class를 선언해줬기 때문에 css에서 가..

티스토리툴바