Live and Learn

▣ 유사 선택자(Pseudo selector) CSS에서 선택 대상의 상태를 특정할 때 이용하는 일종의 키워드입니다. HTML 요소의 이름을 대상(유사 요소; Pseudo elements)으로 활용할 수 있고, 클래스 이름을 대상(유사 클래스; Pseudo classes)으로 할 수도 있습니다. □ 앵커 태그(Anchor tag)와 유사 선택자 임의로 작성한 앵커 태그를 예시로 들어 관련된 속성과 유사 선택자들을 살펴보도록 하겠습니다. My Link ▷ Text-decoration 앵커 태그의 밑줄 설정은 'text-decoration' 속성과 관련이 있으며, 이 속성의 단축 문법을 이용하여 선의 색깔, 스타일, 두께 등을 설정할 수도 있습니다. 자세한 사항은 링크를 참조하기 바랍니다. 예시에서는 밑줄을..

▣ 위치(Position) 아래와 같이 작성한 예시와 함께 'position' 속성에 대해 살펴보도록 하겠습니다. 원활한 실습을 위해 아래의 기본 스타일은 웹 페이지와 동일한 경로에 'css' 폴더를 만들어 'style.css' 파일로 저장해 두겠습니다. □ 정적(Static) 위치와 상대(Relative) 위치 일반적으로 HTML 요소의 위치는 브라우저의 상(Top), 하(Bottom), 좌(Left), 우(Right) 어디를 기준으로 하느냐에 따라 속성의 이름을 정하고, 그 기준으로부터 떨어진 거리를 값으로 설정합니다. 위의 코드는 빨간 박스를 브라우저 상단으로부터 50px, 좌측으로부터 50px 떨어진 거리에 위치시킨다는 의미입니다. 하지만 아래의 결과에서 볼 수 있듯이 위치에는 아무런 변화가 없습..

▣ 박스의 최대폭(Max width) 박스의 폭(Width)을 'width' 속성을 이용하여 설정하면 아래와 같이 브라우저의 폭이 좁아지게 될 경우 텍스트가 잘리는 현상이 발생합니다. 하지만, 'max-width' 속성을 이용하여 박스의 폭을 설정하면 아래와 같이 브라우저의 폭이 좁아져도 박스의 높이가 자동으로 늘어나면서 텍스트는 그대로 보존됩니다. 즉 소위 말하는 반응형 웹(Responsive web)처럼 작동합니다. 박스의 폭이나 높이에 대한 설정이 없을 경우에는 일반적으로 'max-width' 속성이 자동 설정됩니다. ▣ 텍스트 정렬(Text align) 'text-align' 속성을 이용하여 텍스트를 왼쪽('left'), 오른쪽('right'), 또는 가운데('center') 기준으로 정렬할 수 ..

▣ 테두리(Border) 스타일(Style), 두께(Width), 색상(Color), 라운딩(Radius) 등 테두리와 관련된 속성에 대하여 살펴보겠습니다. □ 테두리 스타일(Border style), 두께(Border width) 먼저 테두리가 브라우저에서 보이도록 'border-style'과 'border-width' 속성의 값을 설정할 수 있습니다. 테두리 스타일 속성의 값을 'solid' 그리고 테두리 두께 속성의 값을 '3px'로 설정하면 아래와 같이 테두리에 실선이 생긴 것을 확인할 수 있습니다. □ 테두리 색상(Border color) 테두리가 브라우저에서 보이게 되었다면 이제 'border-color'속성을 이용하여 색상을 설정할 수 있습니다. 테두리 색상 속성의 값을 'red'로 설정하면..

▣ 배경(Background) 색상(Color), 이미지(Image), 반복(Repeat), 위치(Position), 크기(Size), 부착(Attachment) 등 배경과 관련된 다양한 속성에 대하여 살펴보겠습니다. □ 배경 색상(Background color) 임의로 작성한 웹 페이지에 아래와 같이 'background-color' 속성을 이용하여 배경 색상을 적용할 수 있습니다. 참고로 서체의 색상은 배경과 어울릴 수 있도록 오렌지색으로 설정했습니다. 자세한 사항은 링크를 참조하기 바랍니다. 배경 색상 속성의 값이 'green'으로 설정된 후에 배경 색상이 녹색으로 바뀐 것을 확인할 수 있습니다. □ 배경 이미지(Background image) 'background-image' 속성과 'url(" ..

▣ 박스 모델(Box model) ※ 그림 자료 출처 : CSS 3D Box Model Hierarchy 위의 그림에서 볼 수 있듯이 CSS의 구성 요소들 대부분이 박스 구조이며, CSS의 속성 중 상당 부분이 박스 구조를 다루는 것과 관련이 있습니다. 그리고 박스의 유형은 블럭(Block), 인라인(Inline), 인라인-블럭(Inline-block)으로 나누어지며, 박스의 유형에 따라 브라우저에서 보이는 양상이 달라집니다. 박스 모델의 세부 구성 요소에는 외부 여백(Margin), 배경 색상(Background-color), 배경 이미지(Background-image), 테두리(Border), 내부 여백(Padding), 내용(Content) 등이 있습니다. 그 중에서 외부 여백, 테두리, 내부 여백..

▣ 서체(Fonts) 코드 편집기에서 기본적으로 제공되는 다양한 서체를 적용할 수 있고 링크를 통해 외부로부터 제공되는 서체를 이용할 수도 있습니다. 임의로 작성한 아래의 코드를 예시로 서체의 설정에 대해 살펴보겠습니다. First Heading Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus, veritatis doloribus necessitatibus ipsa ab eveniet quis ut porro animi magnam? Second Heading Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum doloribus beatae cupiditate, quas dic..

학습을 시작하기 전에 HTML의 클래스와 아이디 속성에 관한 내용을 먼저 살펴보길 바랍니다. [HTML] TIL5 : 블럭-레벨 및 인라인 요소의 특징 / 클래스 및 아이디 속성 활용 ▣ Block-level & Inline Elements HTML을 구성하는 요소들(Elements) 즉 태그들은 크게 두 가지 종류로 구분됩니다. 하나는 블럭-레벨 요소이고 또 다른 하나는 인라인 요소입니다. 간단하게 설명하자면 브 charlie-lyc.tistory.com ▣ 선택자(Selectors)의 종류 CSS에서 작성되는 방식에 따라 차이는 있지만 가장 많이 사용되는 선택자는 HTML 요소(Element), 클래스(Class), 그리고 아이디(Id) 세 가지입니다. 임의로 작성한 아래의 코드를 예시로 선택자들에 ..

▣ 서론 CSS(Cascading Style Sheets)는 HTML, 자바스크립트와 함께 웹 개발의 핵심 기술 중 하나입니다. 웹 페이지 만드는 것을 건축에 비유하자면 HTML은 구조를 담당하고 자바스크립트는 작동 가능한 기기나 장치 등을 제어하며, CSS는 인테리어나 익스테리어 정도로 파악할 수 있습니다. 즉, CSS는 스타일링을 담당하여 사용자가 좀 더 편안하고 쾌적하게 웹 서비스를 경험할 수 있도록 환경을 제공하는 역할을 합니다. 향후 진행할 내용에서는 최대한 실습 내용을 중심으로 코드들을 설명할 예정이며, 프레임 워크를 이용하지 않고 순수하게 CSS만을 이용한 스타일링에 초점을 맞추도록 하겠습니다. 프레임워크에 대해서는 간단하게 설명하고 향후에 별도로 다루도록 하겠습니다. 기본적인 CSS에 대한..

▣ HTML Entities 앞서 배운 메타 태그에서 HTML 문서를 인코딩하는 데 사용되는 특정 문자 세트(Character set)를 설정하는 속성이 charset이라고 하였습니다. 이때의 값 UTF-8(Unicode Transformation Format–8-bit), 통칭 유니코드(Unicode)가 인코딩에 사용되는 문자 세트인 것입니다. 현재는 대부분의 브라우저가 유니코드를 지원하지만 과거에는 그렇지 않았습니다. 정해진 문자 세트 이외의 문자를 사용해야 할 경우에는 미리 약속된 예약 문자(Reserved characters)들을 사용해야 하는데 이때 사용된 것이 HTML 엔티티입니다. 몇 가지 유용한 경우를 제외하고 개발자가 아니라면 몰라도 크게 문제가 되지 않을 정도로 요즘 코드 편집기와 브라..