210916(목) CSS 2일차 - 셀렉터 / 컬러 / 박스모델 / display, visibility / 포지셔닝개념

<셀렉터>

(1) CSS 기본 셀렉터
- 태그 이름으로 접근한다.
예) h1 {......}
=> h1 태그의 속성을 지정한다.

(2) CSS 자식 셀렉터
- ">" : 자식 셀렉터, HTML 태그의 계층 구조를 표현한다.

예) p > div > fieldset > #pwd {......}
=> p태그 안의, div태그 안의, fieldset태그 안의, id가 pwd인 태그
<p>
   <div>
      <fieldset>
         <input type="text" >
         <input type="password" id="pwd">
         <input type="text" >
      </fieldset>
   </div>
</p>

(3) CSS 자손(후손) 셀렉터
- 자손 셀렉터는 태그의 계층 관계를 나타낸다.
- 자식 셀렉터와 다르게, 명시과정에서 중간단계를 생략해도 된다.

예) p  div #pwd {......} => 여기는 띄어쓰기!!
=> p 태그하위의, div 태그안의, id가 pwd인 태그
<p>
   <div>
      <fieldset>
         <input type="text" >
         <input type="password" id="pwd">
         <input type="text" >
      </fieldset>
   </div>
</p>

(4) 특정 요소를 구체적으로 서술하기
- HTML 태그와 class 또는 id 속성과 함께 명시된다.
- 특정 요소를 더욱 정교하게 명시하고자 할 때 사용한다.
- "A#B" : id 속성이 B인 A태그
- "A.B" : class 속성이 B인 A태그

예) p div input#pwd {......}  => input태그에 걸려있는 id속성
=> p태그 안의, div태그 안의, id가 pwd인 input태그
<p>
   <div>
      <fieldset> => 필드셋의 자손이 3개
         <input type="text" > =>퍼스트차일드
         <input type="password" id="pwd">
         <input type="text" > =>라스트차일드
      </fieldset>
   </div>
</p>

 

(5) HTML 태그의 속성에 따른 구분
- CSS 셀렉터가 적용되는 대상에게 특정 속성이 있는지 여부와 특정 속성의 값이 적용되어 있는지 여부에 따라서 태그 요소를 좀 더 구체적으로 가리킬 수 있다.
- selector[속성] : []안에 명시된 태그 속성을 갖는 요소를 의미한다.
- selector[속성=값] : []안에 명시된 태그 속성이 지정된 값을 갖는 요소를 의미한다.

예) input[type='password'] {......}
=> input 태그 중에서 type이 'password'인 input 태그
<p>
   <div>
      <fieldset>
         <input type="text" >
         <input type="password" id="pwd">
         <input type="text" >
      </fieldset>
   </div>
</p>

 

(6) 가상 클래스 기법

가상 클래스
의미
:first-child
여러 개의 반복되는 태그들중에서 첫 번째 요소
:last-child
여러 개의 반복되는 태그들중에서 마지막 요소
:link
링크의 기본 상태
:active
요소 위에서 마우스가 눌려져 있는 상태
:hover
요소에 마우스가 올라가 있는 상태
:visited
방문했던 경험이 있는 링크
:focus
요소에 포커스가 지정된 상태
:checked
체크박스나 라디오버튼 등이 체크된 상태
:selected
드롭다운에서 선택된 요소

예) 링크의 글자 색상 적용
a:link {color : #555555; }
a:visited {color : #555555; }
a:active {color : #555555; }
a:hover {color : #555555; }

예) focus 유무에 따른 배경색 설정 
input {background-color: #ffffff; }
input:focus {background-color: #555555; }

예) 마우스 위치에 따른 배경 이미지 설정
.menu_item {background-image: url(기본이미지); }
.menu_item:hover {background-image: url(롤오버이미지); }

(7) 선택자의 우선순위
- 공통선택자 : 0
- 타입선택자 : 1
- 클래스 선택자 : 10
- 아이디 선택자 : 100
- 인라인 형식 : 1000
- 우선순위에 관계없이 적용되는 css : !important =>이거나오면 무조건 이것먼저!
  => 선택자의 우선순위와는 관계없이 무조건 적용되어야 하는 속성값의 마지막에 “!important”를 적용
  => 예)
   .area p { =>한칸 띄면 후손
      color: green !important;
   }

 

<exam01>

<exam 02>

cf) 외국은 자바스크립트 위주 / css 잘 안씀

---

<ColorText>

background 속성
  - 배경에 관련된 여러 가지 속성을 포함한다.
  - background 속성은 아래의 여러 속성 들을 지정할 수 있다.
  - 한 요소에 여러 개의 배경 이미지를 적용할 수 있다.

<exam01>

 

(1) 서체
  1) font-family 속성
   - 서체를 지정
   - 예) body { font-family : '돋움‘, dotum, helvetica, sans-serif; }
  
  2) @font-face
   - 서체를 같이 올려두고 연결하는 방법
   - 예) <style type="text/css">
         @font-face{
            font-family: 'Nanum Gothic';
            src:url(fonts/NanumGothic.eot);
            src:url(fonts/NanumGothic.eot?#iefix) format('embedded-opentype'),
               url(fonts/NanumGothic.woff) format('woff'),
               url(fonts/NanumGothic.ttf) format('truetype')
         }
         p{
            font-family: 'Nanum Gothic', sans-serif;
         }
        </style>

(2) 글자 크기 지정
  1) font-size

(3) 글자 두께 지정
  1) font-weight

(4) 글자 장식
  1) text-decoration

(5) 글자 스타일 지정
  1) font-style
    - italic : 기울임      - oblique : 비스듬하게      - normal : 기울어진 글자를 바로 세움

(6) 글자색 지정
  1) color 

(7) 글 정렬 지정
  1) text-align
   - left : 좌측정렬    - right : 우측정렬   - center : 중앙정렬      -justify : 양쪽정렬

(8) 수직 정렬 지정
  1) vertical-align
    - 인라인 요소끼리의 위, 아래 간격을 맞출 수 있다.
   - <img> 요소는 블록 요소 안에 있을 경우 약간의 공백이 발생할 수 있는데, 
     vertical-align을 이용해서 그 공백을 없앨 수 있다.
     예) img {    vertical-align: top; }

(9) 글자 들여쓰기
  1) text-indent
   - 예) p { text-indent: 1em; }
(10) 글의 줄바꿈 처리
  => 인라인 요소인 ‘글(text)'은 자신을 감싸고 있는 상위 블록 요소의 'width'를 넘어서게 되면 줄을 
     바꾸게 된다. 
  1) word-break
   - 단어를 깨뜨려 줄바꿈을 지정
   - 예) <style>
         body{
            width: 400px;
            font-family: '돋움',dotum,helvetica,sans-serif;
            font-size: 12px;
            text-align: justify;         
         }
         .area{
            background-color: #ddd;
            word-break: break-all;      /* text-align: justify;와 같이 지정 */ 
         }
        </style>
  2) white-space
   - 줄바꿈을 금지하거나, <pre> 요소의 특성을 부여
   - nowrap : 줄바꿈 금지
   - pre : <pre> 요소를 지정한 것처럼 띄어쓰기나 줄바꿈 등이 작성한 그대로 표현된다.
   - pre-wrap : 앞의 pre의 효과와 비슷하지만, 지정한 영역을 넘어가지 않는다.
   - pre-line : pre-wrap과 비슷하지만, 띄어쓰기한 공백은 한 칸만 표현된다.
   - 예) <style>         
         .nowrap{
            white-space: nowrap;
         }
         .pre{
            white-space: pre;
         }
         .pre-wrap{
            white-space: pre-wrap;
         }
         .pre-line{
            white-space: pre-line;
         }
        </style>

 

<exam02>

<exam03>

오류가있나보다

---

 

<박스 모델>

 

- HTML의 각 요소들은 사각의 박스 형태를 가진다.
- 이 박스를 표현하기 위해 지정하게 되는 여러 요소들을 한데 묶어 ‘박스 모델’이라고 한다.
- content : 내용
- border : 테두리
- margin : 테두리를 기준으로 바깥쪽 여백
- padding : 테두리와 content 사이의 안쪽 여백

<exam01>

<exam02>

<exam03>

<exam4>

추가설명

 

<exam05>

<h3>div 박스에 배경 꾸미기</h3>
<hr>
<div>SpongeBob is an over-optimistic sponge that annoys other characters. </div>

---

<display, visibility 속성>

 

(1) display 속성
  1) 기본 속성
     - HTML 요소를 블록 혹은 인라인으로 지정한다.
     - 인라인 요소는 width를 가질 수 없고, 블록 요소는 텍스트 정렬이 적용되지 않는다.
     - inline-block은 width 지정도 가능하고, text-align 속성을 지정하면, 정렬도 적용된다.
      게시판 하단의 페이징(1, 2, 3 ...) 부분을 꾸미는데 유용하다.  
     - display : inline                /* 인라인 지정 */
     - display : block                /* 블록 지정 */
     - display : inline-block          /* 인라인 블록 지정, 제일 많이 사용 */
     - display : none                 /* 존재하지 않는 것으로 만든다. */

 

inline
- 줄바꿈 없이 순서대로 한 줄에 다른 엘리먼트들과 나란히 배치된다
- 컨텐트의 크기 만큼만 공간을 차지하므로 width, height 속성을 지정해도 무시된다
- padding, margin 속성은 좌우 간격만 반영이 되고 상하 간격은 반영되지 않는다
- <span>, <a>, <em> 등

block
- 혼자 한 줄을 차지한다
- 매번 줄바꿈이 되어 여러 줄에 보이게 된다
- width, height, padding, margin 속성이 모두 반영된다
- <div>, <p>, <h1> 등

inline-block : 둘의 장점을 모은!
- inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.
- inline에서 불가능하던 width, height, padding, margin 속성의 상하 간격 지정이 가능하다.
- inline-block을 이용하면 여러 개의 엘리먼트를 한 줄에 정확히 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 활용할 수 있다.
- <button>, <select> 등

 

  2) 목록 표현
    - 지정하는 요소가 인라인 요소라도 목록과 같이 블록 형태로 나타낸다.
     - display : list-item               /* 해당 요소가 목록의 형태로 나타난다. */
  3) 테이블 형태 표현
     - display : table               /* table 지정 */

 

 

(2) visibility 속성
  - 기본값은 ‘visible'이며 'hidden'을 지정할 경우에는 지정된 요소가 보이지 않게 된다.
  - 'display: none;'은 원래 없었던 것처럼 표현되지만, 'visibility: hidden'은 보이지만 않고 공간은 
    유지된다.

 

<포지셔닝(positioning) 스타일>

(1) float 속성
  1) left, right
     - float를 지정하면 다음에 오는 컨텐츠가 float를 지정한 블록 주위를 감싸게 된다.
     - html 요소 중에서 인라인 요소나 블록 요소는 그 결과가 무척 다르다. 
      그러나, float를 지정하면 두 요소는 같은 결과를 보여준다. 
     인라인 요소가 블록 요소처럼 크기를 지정할 수 있게 된다.
  2) clear 속성
   - float를 해지한다.
     - clear: left;      /* float: left; 해지 */
     - clear: right;      /* float: right; 해지 */
     - clear: both;      /* float: left;, float: right; 둘 다 해지 */

 

<position 속성>

- 값으로는 absolute, relative, fixed의 3가지가 있다.
- 이렇게 설정된 후에는 left, right, top, bottom 속성으로 그 위치를 지정하게 된다.
(1) position: absolute; (부모 태그의 위치를 기준으로)
  - HTML 문서에 2개 이상의 요소가 나열되면, 뒤에 배치되는 요소는 앞에 놓인 요소를 기준으로 
    배치된다. 하지만, ‘position: absolute’으로 지정하면, 다음 요소가 이 블록을 인지하지 못한 채
   오로지 주어진 절대값을 기준으로 배치된다.
  - ‘position: absolute’ 지정한 후, left, right, top, bottom 속성으로 그 위치를 지정할 수 있다.
(2) position: relative;
  - 기준값 기준으로 상대적으로 배치된다. (자기 자신을 기준으로)
  - ‘position: relative’로 지정된 후, left, right, top, bottom의 위치 값들은 relative가 지정된 블록 그
    자신의 위치에서 지정한 값만큼 이동하게 된다.
  - ‘position: absolute’를 지정하는 경우, 이를 감싸는 블록에는 ‘position: relative’로 지정해야 한다.
(3) position: fixed; (뷰(브라우저의 화면크기)를 기준으로)
  - 위치는 항상 <body>를 기준으로 위치된다.
  - 위치는 고정이다.
(4) z-index
  - position을 지정한 여러 블록이 겹치게 되면, 나중에 작성한 블록이 위로 올라가게 된다.
  - z-index 속성으로 블록의 위, 아래의 위치를 조정할 수 있다.
  - z-index의 큰 값이 위로 올라간다.
  - 기본값이 0, 음수 ~ 양수까지 줄 수 있다

 

<exam01>

 

---

<practice01>

<practice02>