CSS

1. 플렉스란? 플렉스(flex)는 1차원 레이아웃을 만드는 기술입니다. 여기서 차원이란 x축(수평)이나 y축(수직) 같은 하나의 축을 말합니다. 즉, 1차원 레이아웃이란 수평축으로만 정렬하거나 수직축으로만 정렬하는 방법읠 의미합니다. 플렉스는 크게 Flex Container와 Flex Items라는 두 가지 개념으로 살펴볼 수 있습니다. Flex Container는 정렬할 요소들의 묶음을 의미하고, Flex Items는 정렬할 요소를 의미합니다. flex가 나오기 전에는 float 등을 이용하여 레이아웃을 만들었지만, flex를 사용하면 다양하고 유연한 반응형 웹을 쉽게 만들 수 있습니다. - HTML Flex Container(column) flex-items flex-items flex-items ..

CSS 포지셔닝은 박스 모델을 배치하는 것을 의미합니다. CSS에서는 float을 이용해 정렬을 할 수 있습니다. float은 사전적 의미로 '떠오르다', '떠다니다'입니다. 웹 페이지에서는 float을 왼쪽이나 오른쪽에 배치할 때 사용하며 배치를 하지 않을 경우 'none'으로 표현합니다. 1. float 쓰는 법 선택자{ float: left; /* 문서의 왼쪽으로 배치 */ float: right; /* 문서의 오른쪽으로 배치 */ float: none; /* 배치하지 않음 */ } 예문을 하나 작성해보겠습니다. DOCTYPE html> float 사진+글 div{ width: 600px; height:700px; border: 5px solid #000; margin: 50px auto; } im..

CSS 인코딩 방식 선언 CSS 첫 코드는 @charset "utf-8";로 선언하는 것이 좋습니다. 이렇게 선언하면, 아스키 코드나 유니코드 문자열이 있을 때 utf-8로 명시적으로 선언해주어 인코딩 셋을 지정합니다. HTML에서 과 비슷한 역할을 합니다. @charset 사용법 charset 규칙은 스타일 시트 가장 처음으로 선언되어야 합니다. 어떤 문자도 선행하면 안 됩니다. @charset 규칙이 여러 개가 정의된 경우는 첫 번째만 유효합니다. @charset 규칙은 외부 스타일 방식에서만 사용 가능합니다. 인라인 방식 및 내부 스타일 방식에서는 사용이 불가능합니다. style 속성 내부에서 사용될 수 없으며 요소 안에서 역시 사용 불가능합니다. @charset을 통해 문자열 인코딩을 지정해줄 때..

1. 목록 표현 태그 웹 문서를 작성할 때, 목록을 작성해야 할 때가 많습니다. 순서 정렬이나 메뉴 등 리스트를 표시해야 할 때가 있는데 이때 목록 표현 태그를 사용합니다. CSS를 적용하면 홈페이지의 메뉴를 비롯한 다양한 형식으로 활용할 수 있습니다. HTML 태그는 목록의 항목을 나타냅니다. 반드시 순서가 있는 정렬 목록 이나 순서가 없는 비정렬 목록 , 혹은 메뉴 안에 위치해야 합니다. 메뉴와 비정렬 목록은 불릿으로 항목을, 정렬 목록에서는 숫자나 문자로 오름차순으로 항목을 나타냅니다. 2. 비정렬 목록 요소는 unordered list의 약자로 순서가 없는 목록 태그입니다. 순서가 없는 만큼 순서가 중요하지 않은 내용을 입력할 때 사용합니다. 만약 요소 안에 항목들의 순서를 바꾸었을 때 의미가 바..

1. CSS란 웹 표준에서 CSS(Cascading Style Sheets)는 HTML과 함께 웹 표준의 기본 개념입니다. CSS에서 C는 캐스캐이딩의 약자로 '위에서 아래로 흐르는 스타일시트'라는 의미입니다. 다만 HTML처럼 마크업 언어도 아니며 실제 프로그래밍 언어는 아닙니다. 스타일시트 언어로, HTML 문서 요소들에 선택적으로 스타일을 적용할 수 있습니다. HTML이 웹 문서의 뼈대를 구성하고 있다면, CSS(스타일 시트)는 텍스트 색상을 비롯해 태그의 크기, 위치, 색상 등 디자인 요소를 담당합니다. 2. CSS 기초 많은 웹 사이트들이 비슷한 디자인으로 여러 페이지를 제작하며 이때 스타일시트가 유용하게 사용됩니다. 스타일시트를 이용한 디자인 지정 방식은 다음과 같습니다. p의 color를 b..

1. HTML이란 Hypertext Markup Language의 약자로 사용자가 인터넷에서 클릭을 통해 자유롭게 이동하면서 해당 정보를 확인할 때 보는 웹 문서입니다. 대부분의 사용자들은 웹 사이트에 접속하여 정보를 얻는데, 이때 눈으로 보면서 얻는 정보의 형태는 대부분 HTML 언어로 작성되어 있습니다. 2. 웹 표준 초창기 인터넷은 텍스트 정보, 간단한 이미지로 구성되었지만 사용자가 점점 늘며 더 많은 정보를 표현하게 되었습니다. 따라서 실용적인 태그와 다양한 브라우저를 이용한 접속에 대한 보편화된 웹 표준 정의가 필요하게 되었습니다. 웹 표준은 HTML4를 거쳐 현재 HTML5까지 발전했습니다. HTML5의 기본 목표는 모든 웹 표준을 지향하는 브라우저에서 웹 페이지가 동일하게 보이는 것으로 합니..