웹개발

[HTML&CSS]: 번외) Semantic Code

[HTML] 시맨틱 태그(Semantic Tag)와 시맨틱 웹(Semantic Web) (feat. 웹 크롤링, 인덱싱) ​ ​  웹개발을 하는 개발자에게 가장 필요한 능력은 무엇일까요?  가독성 좋은 코드를 짜는 것?  웹 툴을 능숙하게 다루는 것? ​ 이에 대한 해답은 시맨틱 코드(Semantic Code)에 있을 것 같습니다. ​ ​ 출력 결과는 서로 비슷하지만, 그 의미는 전혀 다른 두 코드를 통해 시맨틱 코드에 대해 알아보겠습니다. ​ See the Pen Untitled by HighandLight (@highandlight) on CodePen. ​ 위에서 두 줄의 코드는 모두 같은 모습을 하고 있습니다. ​ 하지만, 첫번째 코드는 '제목(Head)'을 나타내주는 태그를 이용..

[HTML&CSS]4. CSS: inline, block, inline-block

[HTML] CSS의 display level: inline, block, inline-block ​ ​ CSS에서 display 속성은 다른 엘리먼트들과 함께 배치시 가장 우선적으로 고려해야 하는 속성인 만큼 중요한 사항입니다. ​ 이번에는 가장 기본적이면서도 중요한 이 display 속성에 대해 알아보겠습니다. ​ ​ 1. block-level ​ display 속성이 block-level인 엘리먼트는 엘리먼트 혼자 한 줄의 공간을 차지합니다. 즉, 주변에 다른 엘리먼트들이 있다면 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지하는 것입니다. ​ display의 default값으로 block-level을 갖는 태그의 대표적인 예시로는 나, ,등을 들 수 있습니다. ​ 조..

[HTML&CSS] 3. CSS: Position

[HTML] CSS활용: 레이아웃 ​ 1. Position ​ 페이지의 레이아웃을 결정짓는 가장 기본적이고 유용한 속성으로 Position을 들 수 있습니다. ​ Position은 문서 상에서 특정 요소를 배치해주는 속성입니다. ​ position의 속성값들은 top, right, bottom, left 속성들의 값을 조절해줌으로써 배치할 위치를 변경 시킬 수 있습니다. ​ Position이 가질 수 있는 속성값들을 하나하나 살펴보며 Position에 대한 이해를 다지겠습니다. ​ ​ 1) static ​ ​ Position 프로퍼티의 default값이기에, Position 값을 지정해주지 않는다면 브라우저는 기본적으로 Position값을 static으로 인식합니다. ​ 그렇다면 static값은 어떤 방..