도순씨의 코딩일지
Web :: CSS 본문
🌼 CSS란 (정의)
CSS란 HTML 요소의 표현이라 할 수 있습니다. CSS를 이용하여 우리는 폰트 속성, 색상, 사이즈. 간격, 배경 이미지, 그리고 요소들의 위치까지도 지정할 수 있습니다. CSS는 자신만의 문법을 가진 언어입니다. CSS는 HTML의 <head>에 추가될 수 있다는 장점을 가집니다.
CSS의 장점은 다음과 같습니다.
💡 CSS의 포맷 컨트롤은 HTML의 포맷 컨트롤보다 우수하다
💡 더 유지보수가 쉬워진다
💡 접근성이 좋다
💡 중앙집중화된 CSS 파일 집합을 사용하여 모든 프리젠테이션을 위해 구축된 사이트는 각각의 개별 HTML 파일이 적은 마크업을 포함하기 때문에 다운로드하는 것이 더 빠르다
💡 CSS는 다른 출력 매체를 적용하기 좋다
🌼 CSS 문법
CSS 문서는 하나 이상의 스타일 규칙으로 이루어져 있습니다. 규칙은(selector)로 구성되어 있는데, HTML요소나 속성, 값을 가진 쌍(declaration)에 의해서 영향을 받을 수 있는 요소들로 식별됩니다.
declarations의 모음들을 declaration block 이라고 부릅니다. declaration block은 한 줄에 존재할 수도 있고 여러 줄에 나뉘어 존재할 수도 있습니다. 각각의 선언은 세미콜론(;)과 함께 종료됩니다.
모든 CSS 규칙은 선택자(Selector)에서 시작된다고 할 수 있습니다. 선택자는 HTML 문서에 있는 요소들이 선언에 의해서 어떻게 영향을 받는지 식별하는 역할을 합니다. 선택자는 수신할 HTML 요소를 선택하기 위해서 브라우저에서 사용합니다.
각각의 CSS 선언은 속성을 포함하고 있습니다. 또한 CSS 선언은 속성에 대한 값을 포함하고 있습니다. 주어진 값의 단위는 속성에 따라서 달라지며, 일부 속성의 값은 미리 정의된 키워드의 값입니다. 일부는 상대적인 값이고 다른 일부는 절대적인 값입니다. 하지만 절대적인 값을 사용하는 것은 지양해야 합니다. 픽셀과 같은 예외가 있기도 하지만요.
⭐️ 상대적 단위
⭐️ 절대적 단위
CSS의 주석은 C언어와 동일하게 /* (내용) */ 으로 처리합니다.
CSS의 스타일 시트는 Author-created style sheets, User style sheets, browser style sheet로 나뉩니다. 스타일 위치로는 Inline, Embedded, External 로 나누어집니다. 우리는 이 세가지를 조합해서도 사용할 수 있습니다.
먼저 인라인 스타일 에 대해서 살펴봅시다.
인라인 스타일은 오로지 인라인 안에 있는 요소들에만 영향을 끼칩니다. 하지만 인라인 요소를 사용하는 것은 권장되지 않습니다. 유지보수성을 줄이기 때문입니다. 그럼에도 불구하고 인라인 스타일은 스타일을 바꾸고 빠르게 테스트할 수 있다는 점에서 많이 사용되고 있습니다.
다음은 임베디드 스타일 에 대해서 알아보겠습니다.
인라인 스타일보다는 낫지만 임베디드 스타일도 그렇게 권장되는 방식은 아닙니다. 각각의 HTML 문서가 고유의 <style> 요소를 갖고 있기 때문에 임베디드 스타일을 사용하면 여러 문서를 일관성있게 스타일링하기 어려워집니다.
마지막으로 외부 스타일 입니다.
위에서 살펴본 방법들보다 유지보수성이 좋기 때문에 가장 많이 사용됩니다. 외부 스타일에 관련된 변경을 한다면 자동적으로 HTML 문서가 업데이트된 버전을 사용합니다.
🌼 선택자
CSS 선택자를 사용하여 다음과 같은 것을 선택할 수 있습니다.
💡 개별적 요소
💡 다수의 HTML 요소
💡 같은 방법으로 묶여있는 요소들
💡 문서의 계층 구조에 따라서 특정한 방식으로 위치하고 있는 요소들
요소 선택자(Element Selectors) 는 HTML의 요소 이름을 사용합니다. universal element selector를 이용하여 요소를 사용할 수 있습니다.
다음은 그룹 선택자 입니다.
콤마와 함께 다른 요소들을 분리하면 그룹 선택자를 사용할 수 있습니다. 이러한 방식을 통해여 CSS 파일의 크기와 복잡성을 줄일 수 있습니다. 그룹 선택자는 빠르게 초기화하고 브라우저의 디폴트 설정을 지우는 방법으로도 사용됩니다. 아래 그림을 참고해주세요.
이렇게 그룹 선택자를 사용하는 이유는 여백, 줄 간격, 폰트 사이즈에 대해 브라우저의 불일치성을 줄이기 위한 것입니다. 초기화 스타일은 css 파일로 대체될 수 있습니다. 그리고 다른 외부 스타일보다 먼저 링크될 수 있습니다.
클래스 선택자(Class Selectors) 는 문서 트리에서 위치에 상관없이 동시에 다른 HTML 요소를 대상으로 할 수 있습니다. 일련의 HTML 요소가 같은 클래스 속성 값으로 묶여 있다면, 클래스 선택자를 이용하여 스타일링할 수 있습니다. 이럴때는 '.' + 클래스 이름의 형태를 사용합니다.
ID 선택자 는 타입이나 위치에 구애받지 않고 특정한 요소를 선택하는 것에 사용됩니다. HTML 요소가 ID 속성과 묶여 있다면, ID 선택자를 이용하여 스타일링 할 수 있습니다. 이때 /(파운드) 또는 #(해쉬)가 사용됩니다.
ID 선택자와 클래스 선택자의 차이점은, ID 선택자는 하나의 HTML 요소를 사용할 때만 사용해야 합니다. 왜냐하면 하나의 HTML 요소가 ID 속성에 할당될 수 있기 때문입니다. 클래스 선택자는 각각의 연관된 요소들을 참조할 때 사용될 수 있습니다.
속성 선택자(Attribute Selectors) 는 요소 속성의 존재 또는 속성값으로 HTML 요소를 선택합니다. 이것은 매우 유용한 기술이 될 수 있지만 일부 브라우저는 지원하지 않습니다. 속성 선택자는 하이퍼링크와 이미지의 스타일링에 매우 유용한 방법이 될 수 있습니다.
가상 셀렉터(Pseudo Selectors) 는 HTML 문서에 명시적으로 존재하진 않습니다. 하지만 여전히 인식 가능합니다. HTML 요소에 적용되지만 특정 상태를 대상으로 합니다. 이러한 유형의 선택자는 보통 링크 상태를 타겟팅하는데 사용됩니다.
Contextual Selector 는 조상, 자매, 자녀 관계에 따라서 요소들을 선택할 수 있습니다. 즉, 문맥이나 문서간의 관계에 따라서 요소를 선택합니다.
하위 선택자(Descendant Selector) 는 다른 요소를 포함한 모든 요소들과 일치합니다. 하위 선택자를 나타내기 위해 사용하는 문자는 스페이스 문자(' ') 입니다.
🌼 캐스케이드
CSS에서는 가끔씩 충돌이 일어납니다. 왜냐하면 다른 타입들의 style sheet(author-created, user-defined, default)이 존재하기 때문입니다. 또 author-created 스타일시트들은 같은 HTML 요소에 대해서 여러가지 역할을 부여할 수 있기 때문입니다. CSS는 다른 스타일 규칙이 충돌할 때 브라우저가 요소를 표시하는 방법을 결정하는데 도움을 주는 시스템을 가지고 있습니다. 그것이 바로 캐스케이드(Cascade) 입니다. 캐스케이드(Cascade)는 어떤 스타일의 적용을 먼저 받을지 정해주는 체계를 의미합니다. 캐스케이드의 원칙은 크게 세 가지입니다. 바로 '상속(inheritance)', '특이성(specificity)', '위치(location)' 이 있습니다,
상속(inheritance) 는 폰트, 색상, 리스트, 텍스트 속성을 자손까지 전달하는 것을 의미합니다. 레이아웃, 사이즈, 경계, 배경과 공간에 대한 속성은 상속되지 않습니다.
일반적으로 상속할 수 없는 속성을 상속하도록 지시할 수 있기도 합니다.
특이성(specificity) 은 브라우저가 동일한 요소에 둘 이상의 스타일 규칙을 적용할 수 있을때, 어느 것을 우선시하는지 결정하는 것을 명시합니다. 더욱 구체적일수록, 우선시됩니다. 브라우저에서는 각 스타일 룰에 가중치를 할당하고, 가장 비중이 큰 규칙을 우선시합니다. style attribute > ID selectors > class selectors > element selectors 순으로 구성됩니다.
위에서 알아본 상속과 특정성이 우선 순위를 결정할 수 없을 경우, 위치(location) 의 원칙을 사용합니다. 위치의 원칙은 동일한 특이성(specificity)를 가질 때, 가장 최근의 것을 더 많은 가중치를 부여받습니다. 하지만 이러한 사항에도 예외가 있습니다. author-created style에 ' !important ' 가 표시되어 있다면, 우선시합니다.
🌼 Box Model
CSS에서 모든 HTML 요소들은 element box 안에 위치합니다. 하나의 박스는 네 부분(영역)으로 이루어집니다. 각 영역을 콘텐츠 영역, 안쪽 여백(패딩) 영역, 테두리 영역, 그리고 바깥 여백(마진) 영역이라고 부릅니다.
⭐️ 배경
현대 웹디자인에서는 CSS를 사용하여 <img> 요소를 사용하는 것보다는 이미지를 표시하는 것이 빈번하게 일어나고 있습니다.
다음과 같이 background-repeat을 이용하여 배경을 반복하는 반복도 존재합니다.
또한 배경 설정은 다음과 같이 할 수 있습니다.
⭐️ 경계
경계는 시각적으로 분리된 요소를 제공합니다. 요소의 네 면의 경계를 배치할 수 있으며, 그 이하도 가능합니다.
Shortcut notation 은 여러 다른 CSS의 속성 값을 동시에 설정할 수 있게 해줍니다. Shortcut notation을 사용하면 보다 간결하고 읽기 쉬운 스타일시트를 작성할 수 있고, 시간과 에너지를 절약할 수 있습니다. 경계, 안쪽여백, 바깥쪽 여백에 따라서 4면이 설정됩니다. 이를 그림으로 표현하면 다음과 같습니다.
바깥쪽 여백은 Margin, 안쪽 여백은 Padding 이라고 합니다.
마진 병합(collapsing margins) 는 인접한 두 개 이상의 수직 방향 마진이 하나로 합쳐지는 것을 의미합니다. 이로 인해 레벨 요소들이 수직 방향으로 마진이 적용되지 않는 경우가 생깁니다. 마진 병합이 발생했을 때 더 큰 값을 가진 요소의 마진값으로만 반영이 됩니다. 더 작은 여백 값은 0으로 축소되는 것이죠. 반면에 수평 여백은 이런 일이 생기지 않습니다.
⭐️ 너비와 높이
너비와 높이는 내용 영역의 크기를 결정합니다. 이미지와 같은 블록 레벨 요소와 비텍스트 인라인 요소만 너비와 높이를 지정할 수 있습니다. 기본적으로 요소와 폭의 높이는 실제 크기입니다. 텍스트의 경우에는 글꼴 크기와 글꼴 면에 따라서 결정되고 이미지의 경우 픽셀단위가 크기를 결정합니다. 폭과 높이는 기본적으로 content의 크기를 의미합니다. 하지만 요소의 총 크기는 content + 패딩 + 테두리 및 여백의 합과 같습니다.
⭐️ overflow
css의 overflow 속성은 요소 내의 컨텐츠가 너무 커서 한 번에 보여주기 어려운 경우, 어떻게 컨텐츠를 보여줄 지 지정합니다. overflow에 사용할 수 있는 값은 네가지가 있습니다.
💡 visible : 기본값. 넘칠 경우 컨텐츠가 상자 밖으로 보여진다.
💡 hidden: 넘친 부분은 잘려서 보이지 않는다.
💡 scroll: 스크롤바가 추가되어 스크롤할 수 있다. (가로, 세로 모두)
💡 auto: 컨텐츠 양에 따라서 스크롤바를 추가할지 자동으로 결정한다. (가로, 세로 중 하나만 추가될 수 있다)
앞의 예시들은 대부분 픽셀로 이루어져 있지만, 최근에는 백분율이나 em을 사용하는 경우가 늘어나고 있습니다. em은 요소의 글꼴크기를 의미합니다. 백분율을 사용할 경우 크기는 상위 요소의 크기에 비례하며 ems를 사용하면 텍스트의 크기에 비례합니다. 이러한 상대적 수단을 사용하는 이유는 브라우저나 장치의 크기에 의해 확장할 수 있게 만들게 하기 위해서입니다.
🌼 텍스트 스타일링
CSS는 텍스트에 대한 속성 두 가지 종류를 제공하고 있습니다. 바로 폰트 속성과 문단 속성(paragraph properties)입니다. 글꼴(Font-Family) 에 대해서 알아봅시다. microsoft사의 word 프로그램을 생각해보면, 컴퓨터에 설치된 모든 글꼴을 사용할 수 있습니다. 브라우저도 비슷합니다. 그러나 주어진 글꼴이 웹 개발자의 컴퓨터에서 사용 가능하다고 해서 사이트를 보는 모든 사용자가 동일한 글꼴을 사용할 수 있는 것은 아닙니다. 따라서 웹 폰트라는 것을 제공하는 것이 일반적입니다. 웹폰트는 해당 글꼴이 설치되지 않은 사용자도 폰트를 사용할 수 있도록 해줍니다.
@font-face 는 웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있도록 해줍니다. 이 선택자는 위에서 말한 것처럼 해당 글꼴이 설치되지 않은 사용자도 폰트를 사용할 수 있도록 해줍니다.
앞에서 언급한 것처럼 텍스트를 작성할 때는 상대적인 단위인 em이나 퍼센티지를 사용하는 것이 좋습니다.
css는 현재 'rem'이라는 단위를 지원하고 있습니다. 이 단위는 루트 요소의 사이즈에 영향을 받으며, 상대적인 단위입니다, 하지만 인터넷 익스플로러 9 이전의 버전들은 rem 단위를 지원하지 않고 있습니다.
📚 출처
Randy Cannolly(2014), Fundamentals of Wep Development, Peason Higher Education.
[CSS] 캐스캐이딩 ( cascading )
1. 캐스 캐이딩 ( Cascading ) HTML element는 하나 이상의 스타일에 영향을 받을 수 있기 때문에, 어떤 스타일을 적용 받을지에 대한 우선순위가 결정되어야 합니다. 이를 캐스캐이딩 이라고 하는데, CSS
victorydntmd.tistory.com
CSS 기본 박스 모델 입문
문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현합니다. CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 ��
developer.mozilla.org
Shorthand properties
Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) style sheets, saving time and energy.
developer.mozilla.org
padding, margin 에 대하여
https://blog.thereis.xyz/132?category=660023padding, margin 에 대하여HTM...
blog.naver.com
wystan's tales > CSS 이야기: 마진 병합(collapsing margins)
CSS를 이용해서 블록 레벨 요소를 배치하다보면 간혹 수직 방향으로 마진이 적용되지 않을 때가 있습니다. 이런 현상은 대부분 CSS의 중요한 레이아웃 모델 중 하나인 마진 병합(collapsing margins) 때
blog.wystan.net
CSS - 마진(margin)이 합쳐지는 현상, 마진 병합(collapsing margins)
위/아래 수직으로 위치한 요소들 사이에 간격을 주고 싶을 때, 이런 경험들, 있으신가요? "왜, 왜때무네 마...
blog.naver.com
CSS - overflow 속성 사용하기
CSS의 overflow 프로퍼티는 요소내의 컨텐츠가 너무 커서 요소내에 모두 보여주기 힘들때 그것을 어떻게 보여줄지를 지정합니다. 기본적으로 컨텐츠를 포함하고 있는 요소의 크기가 고정되어 있지
offbyone.tistory.com
CSS 값 과 단위
CSS 에 사용된 모든 속성에는 해당 속성에 허용되는 값 이 있으며, MDN 의 속성 페이지를 보면 특성 속성에 유효한 값을 이해하는 데 도움이 됩니다. 이 레슨에서는 가장 일반적인 값 과 사용 단위�
developer.mozilla.org
@font-face
CSS at-rule 인 @font-face 를 사용하여 웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있다. @font-face 를 사용하여 웹페이지 제작자가 원하는 폰트를 사용할 수 있게함으로써, 컴퓨터에
developer.mozilla.org
'𝐏𝐑𝐎𝐆𝐑𝐀𝐌𝐌𝐈𝐍𝐆 > 𝐖𝐄𝐁' 카테고리의 다른 글
| Web :: HTML Syntax, HTML Semantic Elements (0) | 2020.09.16 |
|---|---|
| Web :: 웹, 인터넷 프로토콜, 클라이언트-서버모델, 인터넷, DNS, URL, HTTP, 웹서버 (0) | 2020.09.06 |
