Colin's Blog
[CSS3] 1. CSS3 이란?

CSS3 이란?

CSS (Cascading Style Sheet)는 마크업 언어가 실제로 표시되는 방법을
기술하는 언어로, HTML 과 XHTML 에 주로 쓰이며, XML 에서도 사용할 수 있습니다.
CSS 는 W3C 의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높은 언어입니다.
또한 웹 사이트에서 사용되는 스타일을 지정하기 위한 언어로 스타일은 웹의 독창적인 개념이 아니라
웹 이전부터 워드프로세스 등에 사용했던 개념입니다.

CSS3 의 과거와 현재

모듈에 따라 표준화 된 것도 있고, 비표준인 것이 있습니다.
그렇기에 어디까지 표준화가 되어있는지 미리 확인하고,
비표준인 부분은 자바스크립트로 대체 가능한지 확인해서, 개발을 하여야 합니다.

웹표준 개발 단계

Draft(초안) => Working Draft(작업 초안) => Candidate Recommendation(권고 후보) => Proposed Recommendation(최종 권고안) => Recommendation(권고안)

가급적 권고가 있는 방향으로 개발을 하도록 해야할 것입니다.

CSS 사용의 의의

스타일 사용의 중요한 의의는 문서의 구조와 표현을 분리할 수 있다는 점을 들 수 있으며,
이는 구조와 표현을 분리함으로써 문서 구조의 수정없이 스타일의 변경만으로 다양한 표현을 할 수 있다는 것의 의미합니다.

CSS 기본 문법

selector {
  property(속성): value(속성값);
  (세미콜론)property2: value2;
}

CSS - Vender Prefix

웹 브라우저별 접두사(vendor prefix)

CSS3 가 표준안이 아직 확정되지 않아서 최신 웹 브라우저들은 CSS3 속성을 실험적으로 제공하고 있습니다.
이를 위해 속성이나 속성값 앞에 웹 브라우저별로 접두사를 제공하고 있으며,
접두사의 경우 브라우저별로 다르기 떄문에 하나의 속성을 선언하기 위해서는 여러번 동일한 선언을 지정해야합니다.

웹 브라우저 접두사
파이어폭스 -moz-
크롬,사파리 -webkit-
오페라 -o-
인터넷 익스플로러 -ms-

일일히 동일한 선언이 귀찮다면 prefix-free 라는 서비스를 이용하는게 좋습니다.

CSS - 주석 (Comment)

/* 로고 텍스트 CSS */
. logo {
  background-color: tomato;
  display: inline;
}

작성한 코드에 대해 설명을 할 수 있는 주석입니다.
자바스크립트와 비슷하나 한 줄짜리 주석인 (//)은 사용할수 없습니다. 자바독(/**)은 사용가능합니다.

절대 단위와 상대 단위

절대 단위 : 절대 단위는 단위에 절대값을 적용하여, 해상도에 상관없이 값을 유지하는 단위입니다.
평상시에는 잘 사용하지 않지만 프린트 레이아웃과 같이 출력 화면을 알고 있는 경우에는사용됩니다.

상대 단위 : 상대 단위는 다른 단위 속성에 대한 상대적 길이를 지정합니다.
싱대 단위를 잘 사용하면 다양한 디바이스에 최적화된 보기를 제공할 수 있기 때문에 권장되는 단위입니다.

사용 제안

선정된 환경(예측되는 환경)만 감안한다면 절대 단위만으로 원하는 결과를 얻을 수 있습니다.
하지만 다양한 환경(환경에 대해 예측이 안될 때)에 최선의 결과를 얻고 싶다면 상대 단위를
기반으로 하는 디자인 설계를 해야할 것입니다.

RGBA 와 HSLA 형식

#header01 {
  background-color: rgba(0, 255, 0, 0.5);
}
/* id가 header01에 대해 배경값을 반투명상태의 초록색으로 지정하였습니다. */

#header02 {
  background-color: hsla(120, 100%, 50%, 0.5);
}
/* id가 header02에 대해 배경값을 반투명상태의 초록색으로 지정하였습니다. */

CSS 적용하기

CSS 를 HTML 에 적용하는 방법은 세가지 방법이 있습니다.

  1. HTML Element 에 직접 스타일을 적용하는 방법
<h1 style="color:red;">Hello World</h1>
  1. <style>태그를 사용해서 적용하는 방법
<style>
    #moong {
        background: tomato;
    }
</style>
  1. 외부에 CSS 파일을 만들고 <link>또는 @import 를 이용하여 불러오는 방법
<link rel="stylesheet" href="./css/style.css" />

@import url("./css/style.css");

필요성에 따라서 방법을 골라서 적용하면 되겠지만
생산성 및 유지보수 측면에서 본다면 3 번이 가장 효율적이라 생각합니다.

CSS 선택자

* [전체 셀렉터] : HTML 문서 내의 모든 문서를 가리킵니다.
html 요소를 포함한 모든 요소를 선택됩니다. (head 요소도 포함됩니다.)

* {
  font-family: fantasy;
}

태그명 [태그 셀렉터] : 지정된 태그명을 가지고 요소를 선택합니다.

img {
  width: 300px;
  height: 300px;
}

ID 어트리뷰트 [ID 셀렉터] : id 어트리뷰트 값을 지정하여 일치하는 요소를 선택합니다.
단, id 어트리뷰트 값은 중복될 수 없는 유일한 값입니다.

#moong {
  color: powderblue;
}

클래스명 [클래스 셀렉터] : class 어트리뷰트 값을 지정하여 일치하는 요소를 선택합니다.
id 어트리뷰트와는 다르게 class 어트리뷰트 값은 중복될 수 있습니다.

.container {
  display: flex;
}

셀렉터[어트리뷰트] [어트리뷰트 셀렉터] : 지정된 어트리뷰트를 갖는 모든 요소를 선택합니다.

a[href] {
  color: blue;
}

a[href="http://www.naver.com"] {
  color: green;
}
/* 지정된 어트리뷰트를 가지며 지정된 값과 어트리뷰트를 일치하는 모든 요소를 선택 */

input[class~="login"] {
  font-weight: bold;
}
/* 지정된 어트리뷰트를 가지며 지정된 값을 단어로 포함하는 요소를 선택 */

a[href^="http://"] {
  text-decoration: underline;
}
/* 지정된 어트리뷰트 값으로 시작하는 요소를 선택 */

a[href$=".css"] {
  color: purple;
}
/* 지정된 어트리뷰트 값으로 끝나는 요소를 선택 */

div[class*="task"] {
  display: block;
}
/* 지정된 어트리뷰트 값을 ㅍ함하는 요소를 선택 */

셀렉터A 셀렉터B [후손 셀렉터] : 셀렉터 A 의 모든 후손(하위) 요소중 셀렉터 B 와 일치하는 요소를 선택합니다.

div li {
  color: salmon;
}

셀렉터A > 셀렉터B [자식 셀렉터] : 셀렉터 A 의 모든 자식 요소중 셀렉터 B 와 일치하는 요소를 선택합니다.

div > p {
  color: teal;
}

셀렉터A + 셀렉터B [인접 형제 셀렉터] : 셀렉터 A 의 형제 요소 중 셀렉터 A 바로 뒤에 위치하는 셀렉터 B 요소를 선택합니다.
A 와 B 사이에 다른 요소가 존재할경우 선택되지 않습니다.

div + ol {
  color: red;
}

셀렉터A ~ 셀렉터B [일반 형제 셀렉터] : 셀렉터 A 의 형제 요소 중 셀렉터 A 뒤에 위치하는 셀렉터 B 요소를 모두 선택합니다.

div ~ ul {
  color: red;
}

셀렉터:가상클래스 [가상 클래스 셀렉터] : 특정 상태에는 원래 클래스가 존재하지 않지만 가상 클래스를 임의로 지정하여 선택합니다.
가상 클래스는 마침표(.)대신에 콜론(:)을 사용하며, CSS 표준에 의해 미리 정의된 이름이 있기 때문에 임의의 이름을 사용할 수 없습니다.

a:hover {
  color: yellow;
}
/* a 요소에 hover(마우스가 올려지는)상태일 때 폰트가 노란색으로 변합니다 */

input:focus {
  background-color: orange;
}
/* input 요소가 focus(값을 입력하기 위해 클릭된 상태)일 때 배경색이 오렌지색으로 변합니다. */

a:link {
  color: blue;
}
/* a 요소가 방문하지 않은 링크일 때 폰트색은 파란색입니다. */

a:visited {
  color: purple;
}
/* a 요소가 방문한 링크일 때 폰트색은 보라색입니다. */

a:active {
  text-decoration: underline;
}
/* a 요소가 클릭된 상태일 때 밑줄이 그어집니다. */

요소:UI 요소 상태 셀렉터 [UI 요소 상태 셀렉터] : 가상 클래스 셀렉터의 한 종류로 UI 상태를 나타내는 셀렉터를 이용하여
다양한 효과를 지정할 수 있습니다.

input:enabled + span {
  color: blue;
}
/* input 요소가 사용 가능한 상태일 때,
input 요소 바로 뒤에 위치하는 인접 형제 span 요소의 폰트색이 파란색이 됩니다. */

input:disabled + span {
  color: gray;
  text-decoration: line-through;
}
/* input 요소가 사용 불가능한 상태일 때,
input 요소 바로 뒤에 위치하는 인접 형제 span 요소의 폰트색이 회색이 되고 텍스트에 줄이 그어집니다. */

input:checked + span {
  color: yellow;
}
/* input 요소가 체크 상태일 때,
input 요소 바로 뒤에 위치하는 인접 형제 span 요소의 폰트색이 노란색이 됩니다. */

박스모델은 내일 추가 공부 및 복습하면서 올릴예정입니다

2. Today I Found Out

CSS에 대해서 알면 알수록 놀랍고 흥미로운 것 같습니다.
예전에 혼자서 웹 어플리케이션을 만들어볼 때
생각과 다르게 배치가 되고 제풀에 지쳐 만들다 만 경험이 있는데,
수업과 공부를 통해 조금씩 알게되면서, 그때 안되었던 이유를 알게되었고,
'선택자 지정을 통해 CSS에서도 생산성을 충분히 높일수 있구나'라는
생각을 조금씩 하게 되는 것 같아 좋았습니다.
아직은 부족하지만 꾸준히 HTML과 CSS도 공부하며,
표준을 준수하면서 생산성도 좋고 멋지면서도 모두에게
친절하고 편하고 쉬운 웹 어플리케이션을 만드는 프론트 엔지니어로
성장하도록 노력하겠습니다!

3. refer

http://poiemaweb.com/

http://webberstudy.com/

© 2018 Colin. All rights reserved.