WEB/HTML,CSS (5) 썸네일형 리스트형 [HTML] <!DOCTYPE> 크롬 개발자 도구로 HTML 문서를 보면 항상 최상위에는 가 있다. 은 태그와 비슷한 모습을 하고 있지만 태그는 아니다. 바로 브라우저에게 HTML에 버전을 알려주는 구문이다. 그렇기 때문에 브라우저가 파싱을 하기전에 문서의 버전을 알려주기 위해서 최상단에 위치하고 있는 것이다. HTML 4.01에서 DOCTYPE 선언은 SGML을 기반으로 하기 때문에 DTD를 참조해야 한다. DTD는 브라우저가 콘텐츠를 정확하게 표현하도록 마크업 언어에 대한 규칙을 명시한다. 하지만 HTML5는 SGML을 기반으로 하지 않기 때문에 DTD를 참조할 필요가 없다. SGML(Standard Generalized Markup Language) : IBM에서 1960년대 개발한 마크업 언어이다. ISO 표준이라고 한다. SG.. [CSS] BEM이 뭘까 BEM BEM은 CSS 방법론이다. 말이 어렵지만 풀어 말하면 'CSS 클래스네임을 어떻게 지으면 좋을지' 개발자들이 머릴 맞대고 고민한 결과이다. html 요소들을 각각 Block, Element, Modifier이렇게 세 가지로 분류해 작명한다. Block 독립적으로 존재하고 재사용 가능한 요소를 block으로 명명 태그 값, id 사용 X 클래스로 정의 position, margin 등의 위치값을 지정하지 않음 (어디든지 재사용하기 위해!) 색상이나 크기 등을 묘사하는 이름 X 구조적으로 의미 있는 이름으로 짓기 ex) .btn{} Element 블록 내부에 종속되어 실제 기능을 담당하는 것 종속의 의미를 "block-name__element-name"로 나타낸다. 독립적으로 존재x 블록 내부에서 .. [CSS] Box model - inline과 Block의 차이점 display: inline ? 대표적인 태그로는 span을 예로 들 수 있는데, Text 크기만큼만 공간을 점유하고 줄바꿈을 하지 않는다. Block 요소는 포함할 수 없다. 너비(width) / 높이(height) 설정이 가능하지 않고 내부에 포함한 콘텐츠 만큼 높이와 너비를 가지게 된다. display: block ? 대표적인 태그로는 div를 예로 들 수 있는데, 해당 줄의 모든 공간을 점유하고. 다음태그는 무조건 줄바꿈을 한다. BOX 이다! BOX ?! 박스는 다른 박스에 포함되거나, 포함할 수 있고, 너비(width) / 높이(height) 설정이 가능하다. BOX의 특징 3가지 : padding, border, margin 1. 패딩(padding) : 콘텐트과 테두리(border) 사이의.. [HTML]Semantic HTML가 뭐길래 중요한데? Semantic HTML ? 시맨틱(Semantic) HTML을 직역하면 의미론적 HTML이 된다. 사실 무슨 말인지 잘 모르겠지만 의미론적이란 언어에서 단어와 구절의 의미를 아는 것을 뜻한다. HTML에서 semantic element는 해당 element의 의미를 브라우저와 개발자 모두에게 알려줄 수 있다. Semantic elements ? 예를 들어, 태그는 non-semantic 태그라고 할 수 있고, , 등의 태그는 semantic 태그라고 볼 수 있다. 일반적으로 태그만 보고는 이 태그 안에 들어간 내용의 의미를 알 수가 없다. 반면, , 등의 태그는 대략이라도 태그 안에 들어갈 내용의 의미를 유추할 수 있다. 태그 안에는 표가 들어갈 것이고, 태그 안에는 어떤 형태의 글이든 글이 들어갈 것.. [HTML] HTML 개념 정의 및 문법 정리 1. HTML 개념 및 정의 HTML(Hyper Text Markup Language)이란 웹사이트를 만드는 가장 기초가 되는 마크업 언어이며 웹페이지의 내용과 구조를 담당하는 언어로써 브라우저에게 정보를 어떤 형식으로 보여주어야 하는지를 전달해주는 역할을 한다. 마크업 언어(Markup Language)는 문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 언어의 일종이다. 데이터를 기술한 언어라는 점에서 프로그래밍 언어와는 차이가 있다. 2. HTML의 요소 여는 태그(Opening tag): 이것은 요소의 이름과(이 경우 p), 열고 닫는 꺽쇠 괄호로 구성됩니다. 요소가 시작(이 경우 단락의 시작 부분)부터 효과가 적용되기 시작합니다. 닫는 태그(Clos.. 이전 1 다음
