Web) HTML & CSS

[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값은 어떤 방..

[HTML&CSS] 2. CSS의 기본

[HTML] CSS의 기본 개념 ​ 1. CSS(Cascading Style Sheets)의 정의와 기능 ​ HTML과 함께, 뗄레야 뗄 수 없는 관계인 CSS는 무엇일까요? CSS는 사용자가 HTML로 작성한 문서의 표시 방법을 기술하기 위한 스타일시트(style sheet)언어입니다. 사용자는 CSS를 통해 웹 페이지에 들어갈 스타일과 레이아웃을 적용할 수 있습니다. 간단한 예시로, 페이지의 글꼴, 색상, 크기와 같은 기본적인 스타일부터 콘텐츠간의 간격, 페이지의 분할 및 장식과 같은 웹페이지 구성 역시 시각적으로 잘 나타낼 수 있습니다. 쉽게 말해, HTML이 연필로 그리는 밑그림이라면, CSS는 물감을 통해 그리는 채색인 것입니다! *정리 CSS는 HTML로 작성한 텍스트 코드의 스타일을 결정하는..

[HTML&CSS]1. HTML의 기본

[HTML] 01. HTML의 기본 개념 01-1. HTML(Hypertext Markup Language)의 정의와 기능 초보자들이 컴퓨터 소프트웨어에 대해 처음 입문할 때 가장 많이, 그리고 쉽게 배우는 HTML. HTML은 과연 무엇일까요? HTML 은 웹페이지를 구조화하기 위해 사용하는 코드로서, 콘텐츠의 구조를 정의하는 마크업언어입니다. (* HTML은 프로그래밍 언어가 아닙니다! *) 우리는 HTML을 통해 웹사이트에 보여지는 콘텐츠( 예를 들어 이미지, 텍스트, 글 목록, 데이터,, 등등)들을 구성할 수 있습니다. 또한 브라우저(Safari, Chrome, Ie ...)는 사용자가 작성한 HTML 파일을 토대로 무엇을 어떻게 그려주면 되는 지 파악한 후, 웹페이지를 형성하게 됩니다. 정리 H..