코딩하는망아치

CSS

• link와 @import차이

  -link : html페이지에서 css를 불러올때 사용하는 것, 병렬호출

  -@import : css에서 다른 css파일을 불러올때 사용하는것, 직렬호출

CSS선택자

• 기본선택자

  1. 전체선택자

  * {
    color: red;
  }

  <div>  <!--선택-->
    <ul>  <!--선택-->
      <li>사과</li>  <!--선택-->
      <li>딸기</li>  <!--선택-->
      <li>오렌지</li>  <!--선택-->
    </ul>
    <div>당근</div>  <!--선택-->
    <p>토마토</p>  <!--선택-->
    <span>오렌지</span>  <!--선택-->
  </div>

  전체를 선택해서 글자를 빨간색으로 적용한다.

  2. 태그 선택자

  li {
    color: red;
  }

  <div>
    <ul>
      <li>사과</li>  <!--선택-->
      <li>딸기</li>  <!--선택-->
      <li>오렌지</li>  <!--선택-->
    </ul>
    <div>당근</div>
    <p>토마토</p>
    <span>오렌지</span>
  </div>

  3. 클래스 선택자

  .orange {
    color: red;
  }

  <div>
    <ul>
      <li>사과</li>
      <li>딸기</li>
      <li class="orange">오렌지</li>  <!--선택-->
    </ul>
    <div>당근</div>
    <p>토마토</p>
    <span class="orange">오렌지</span>  <!--선택-->
  </div>

  4.아이디 선택자

  #orange {
    color: red;
  }

  <div>
    <ul>
      <li>사과</li>
      <li>딸기</li>
      <li id="orange" class="orange">오렌지</li>  <!--선택-->
    </ul>
    <div>당근</div>
    <p>토마토</p>
    <span class="orange">오렌지</span>
  </div>

• 복합 선택자

  1. 일치 선택자(E와 F를 동시에 만족하는 요소 선택)

  EF

  span.orange {
    color: red;
  }

  <div>
    <ul>
      <li>사과</li>
      <li>딸기</li>
      <li class="orange">오렌지</li>
    </ul>
    <div>당근</div>
    <p>토마토</p>
    <span class="orange">오렌지</span>  <!--선택-->
  </div>

  2.자식 선택자(E의 자식 요소 F를 선택)

  E > F

  ul > .orange {
    color: red;
  }

  <div>
    <ul>
      <li>사과</li>
      <li>딸기</li>
      <li class="orange">오렌지</li>  <!--선택-->
    </ul>
    <div>당근</div>
    <p>토마토</p>
    <span class="orange">오렌지</span>
  </div>

  3.후손(하위) 선택자(E의 후손(하위) 요소 F를 선택),('띄어쓰기'가 선택자의 기호로 사용됩니다.)

  E F

  div .orange {
    color: red;
  }

  <div>
    <ul>
      <li>사과</li>
      <li>딸기</li>
      <li class="orange">오렌지</li>  <!--선택-->
    </ul>
    <div>당근</div>
    <p>토마토</p>
    <span class="orange">오렌지</span>  <!--선택-->
  </div>

  4.인접형제 선택자(E의 다음 형제 요소 F 하나만 선택)

  E + F

  .orange + li {
    color: red;
  }

  <ul>
    <li>딸기</li>
    <li>수박</li>
    <li class="orange">오렌지</li>
    <li>망고</li>  <!--선택-->
    <li>사과</li>
  </ul>

  5.일반 형제 선택자(E의 다음 형제 요소 F 모두 선택)

  E ~ F

  .orange ~ li {
    color: red;
  }

  <ul>
    <li>딸기</li>
    <li>수박</li>
    <li class="orange">오렌지</li>
    <li>망고</li>  <!--선택-->
    <li>사과</li>  <!--선택-->
  </ul>

• 가상클래스 선택자

  1. HOVER (E에 마우스(포인터)가 올라가 있는 동안에만 E 선택)

  E:hover

  a:hover {
    color: red;
  }

  <a href="http://www.naver.com">NAVER</a>

  2. ACTIVE (E를 마우스로 클릭하는 동안에만 E 선택)

  E:active

  div {
    width: 100px;
    height: 100px;
    background: tomato;
    transition: 0.4s;
  }
  div:active {
    width: 200px;
  }

  3. FOCUS (E가 포커스 된 동안에만 E 선택)

  E:focus

  • 대화형 콘텐츠에서만 사용가능

    input, img, tabindex,

  input {
    width: 100px;
    outline: none;
    padding: 5px 10px;
    border: 1px solid lightgray;
    transition: 0.4s;
  }
  input:focus {
    width: 200px;
    border-color: red;
  }

  <input type="text">

  4. FIRST CHILD (E가 형제 요소 중 첫번째 요소라면 선택)

  E:first-child

  .fruits li:first-child {
    color: red;
  }

  <ul class="fruits">
    <li>딸기</li>  <!--선택-->
    <li>사과</li>
    <li>오렌지</li>
    <li>망고</li>
  </ul>

  5. LAST CHILD (E가 형제 요소 중 마지막 요소라면 선택)

  E:last-child

  .fruits li:last-child {
    color: red;
  }

  <ul class="fruits">
    <li>딸기</li>
    <li>사과</li>
    <li>오렌지</li>
    <li>망고</li>  <!--선택-->
  </ul>

  6. NTH CHILD (E가 형제 요소 중 n번째 요소라면 선택) (n 키워드 사용시 0부터 해석(Zero-base))

  E:nth-child(n)

  .fruits li:nth-child(2) {
    color: red;
  }

  <ul class="fruits">
    <li>딸기</li>
    <li>사과</li>  <!--선택-->
    <li>오렌지</li>
    <li>망고</li>
  </ul>

  두번째 요소만 선택

  .fruits li:nth-child(2n) {
    color: red;
  }

  <ul class="fruits">
    <li>딸기</li>
    <li>사과</li>  <!--선택-->
    <li>오렌지</li>
    <li>망고</li>  <!--선택-->
  </ul>

  짝수번째 요소만 선택

  .fruits li:nth-child(n+3) {
    color: red;
  }

  <ul class="fruits">
    <li>딸기</li>
    <li>사과</li>
    <li>오렌지</li>  <!--선택-->
    <li>망고</li>  <!--선택-->
  </ul>

  3번째 요소부터 이후요소들만 선택

  .fruits p:nth-child(1) {
    color: red;
  }

  <!--선택된 요소 없음-->
  <div class="fruits">
    <div>딸기</div>
    <p>사과</p>
    <p>망고</p>
    <span>오렌지</span>
  </div>

  .fruits의 첫번째 자식 요소가 <p></p>가 아니기 때문에 선택되지 않음.

  7. NTH OF TYPE (E의 타입(태그이름)과 동일한 타입인 형제 요소 중 E가 n번째 요소라면 선택)

  (n 키워드 사용시 0부터 해석(Zero-base))

  E:nth-of-type(n)

  .fruits .red:nth-of-type(1) {
    color: red;
  }

  <!--선택된 요소 없음-->
  <ul class="fruits">
    <li>오렌지</li>
    <li class="red">딸기</li>
    <li>망고</li>
    <li class="red">사과</li>
  </ul>

  2번쨰와 4번째에 있는 .red 요소의 타입(태그이름)은 li 이기 때문에, :nth-of-type(1)선택자는

  <li></li> 들 중에서 첫번째 요소를 선택하고 .red인지 체크하게 된다. 따라서 조건에 맞는 요소가 없으므로 선택되지 않는다.

  8. 부정선택자 (S가 아닌 E 선택)

  E:not(S)

  .fruits li:not(.strawberry) {
    color: red;
  }

  <ul class="fruits">
    <li>오렌지</li>  <!--선택-->
    <li class="strawberry">딸기</li>
    <li>망고</li>  <!--선택-->
    <li>사과</li>  <!--선택-->
  </ul>

• 가상요소 선택자

  1. BEFORE (E 요소 내부의 앞에, 내용(content)을 삽입)

  E::before

  ul li:before { /* support IE 8 */
    content: "$";
  }
  ul li::before {
    content: "$";
  }

  <ul>
    <li>1</li>  <!-- $1 -->
    <li>2</li>  <!-- $2 -->
    <li>3</li>  <!-- $3 -->
    <li>4</li>  <!-- $4 -->
  </ul>

  각<li></li> 내부의 앞에 내용(content)으로 $문자를 삽입했다.

  내용을 넣기 위해서는 content 속성이 필수이다.

  div::before {
    content: url("../images/smile.png");
  }

  url()을 통해서 이미지를 삽입할수 있다.

  2. AFTER (E 요소 내부의 뒤에, 내용(content)을 삽입)

  E::after

  ul li:after { /* support IE 8 */
    content: ".0";
  }
  ul li::after {
    content: ".0";
  }

  <ul>
    <li>1</li>  <!-- 1.0 -->
    <li>2</li>  <!-- 2.0 -->
    <li>3</li>  <!-- 3.0 -->
    <li>4</li>  <!-- 4.0 -->
  </ul>

  각 <li></li> 내부의 뒤에 내용(content)으로 .0문자를 삽입했다.

• 속성 선택자

  1. ATTR (속성 attr을 포함한 요소 선택)

     [attr]

     [disabled] {
       opacity: 0.2;
     }

     <input type="text" value="HEROPY">
     <input type="password" value="1234">
     <input type="text" value="disabled text" disabled>

     

  2. ATTR=VALUE (속성 attr을 포함하며 속성 값이 value인 요소 선택)

  [attr=value]

  [type="password"] {
    color: red;
  }

  <input type="text" value="HEROPY">
  <input type="password" value="1234">
  <input type="text" value="disabled text" disabled>

  

  3. ATTR^=VALUE (속성 attr을 포함하며 속성 값이 value로 시작하는 요소 선택)

  [attr^=value]

  [class^="btn-"] {
    font-weight: bold;
    border-radius: 4px;
  }

  <button class="btn-success">Success</button>
  <button class="btn-danger">Danger</button>
  <button>Normal</button>

  

  4. ATTR$=VALUE (속성 attr을 포함하며 속성 값이 value로 끝나는 요소 선택)

  [attr$=value]

  [class^="btn-"] {
    font-weight: bold;
    border-radius: 4px;
  }
  [class$="success"] {
    color: green;
  }
  [class$="danger"] {
    color: red;
  }

  <button class="btn-success">Success</button>
  <button class="btn-danger">Danger</button>
  <button>Normal</button>

  

• 상속

  .ecosystem {
    color: red;
  }

  <div class="ecosystem">생태계  <!--RED-->
    <div class="animal">동물  <!--RED-->
      <div class="tiger">호랑이</div>  <!--RED-->
      <div class="lion">사자</div>  <!--RED-->
      <div class="elephant">코끼리</div>  <!--RED-->
    </div>
    <div class="plant">식물</div>  <!--RED-->
  </div>

  생태계(.ecosystem)에 적용된 색상이, 하위 요소들에게도 적용되었습니다.

  • 상속되는 속성들(properties)
    • font
      • font-style
      • font-weight
      • font-size
      • line-height
      • font-family
    • color
    • text-align
    • text-indent
    • text-decoration
    • letter-spacing
    • opacity

  강제상속

  <div class="parent">
    <div class="child"></div>
  </div>

  .parent {
    position: absolute;  /* 상속되지 않는 속성과 값 */
  }
  .child {
    position: inherit;  /* 강제 상속 받아 position: absolute; 와 동일 */
  }

  상속되지 않는 속성(값)도 inherit 이라는 값을 사용하여 '부모'에서 '자식'으로 강제 상속시킬 수 있습니다. '자식'를 제외한 '후손'에게는 적용되지 않으며, 모든 속성이 강제 상속을 사용할 수 있는 것은 아닙니다.

• 우선순위

  <body>
    <!--인라인 선언방식-->
    <div id="color_yellow" class="color_green" style="color: orange;">Hello world!</div>
  </body>

  div { color: red !important; }  /* !important */
  
  #color_yellow { color: yellow; }  /* 아이디 선택자 */
  
  .color_green { color: green; }  /* 클래스 선택자 */
  
  div { color: blue; }  /* 태그 선택자 */
  
  * { color: darkblue; }  /* 전체 선택자 */
  
  body { color: violet; }  /* 상속 */

  우선순위 결정

  같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 CSS속성을 우선적용할지 결정하는 방법

  1. 명시도 점수가 높은 선언이 우선(명시도)

  2. 점수가 같은경우, 가장 마지막에 해석되는 선언이 우선(선언순서)

  3. 명시도는 '상속'규칙보다 우선(중요도)

  4. !important가 적용된 선언방식이 다른 모든 방식보다 우선(중요도)

  1. 가장중요(!important)

  모든 선언을 무시하고 가장 우선

  점수 : 무한pt

  div {
    color: red !important; /* 가장 우선 */
  }

  2.인라인 선언 방식

  인라인 선언(HTML style 속성을 사용)

  점수: 1000px

  <div style="color: orange;">HELLO WORLD</div>  <!-- 1,000pt -->

  3. 아이디

  아이디 선택자

  점수: 100pt

  #color_yellow {
    color: yellow;  /* 100pt*/
  }

  4. 클래스()

  클래스 선택자

  점수 : 10pt

  .color_green {
    color: green;  /* 10pt */
  }

  5. 태그

  태그 선택자

  점수 : 1pt

  span{
  color:blue; /* 1pt */

  6. 전체

  전체 선택자

  점수 : 0pt

  * {
    color: darkblue;  /* 0pt */
  }

  7. 상속

  상속받은 속성은 항상 우선하지 않음

  점수 : 계산하지 않음

  body {
    color: violet;
  }

  계산해보기!

  .list li.item { color: red; }  /* 21pt */
  
  .list li:hover { color: red; }  /* 21pt */
  
  .box::before { content: "Good "; color: red; }  /* 11pt */
  
  #submit span { color: red; }  /* 101pt */
  
  header .menu li:nth-child(2) { color: red; }  /* 22pt */
  
  h1 { color: red; }  /* 1pt */
  
  :not(.box) { color: red; }  /* 10pt */
  
  :not(span) { color: red; }  /* 1pt */

  :hover 처럼 '가상 클래스'는 '클래스' 선택자의 점수(10pt)를 가지며, ::before 처럼 '가상 요소'는 '태그' 선택자의 점수(1pt)를 가진다. 부정 선택자 :not()은 점수를 가지지 않는다.

CSS단위

• px

• %

• em

  자기자신의 font-size에 영항을 받음

  font-size는 상속이 되서 계속 자식의 자식으로 자동으로 넘어간다. → .parent와 .child에 font-size:10px;가 정의 되어있다고 생각하고 봐야함.

  em은 font-size * em앞에 숫자 한것이 결과 값 이라고 봐야함

  font-size가 10px이고 em이 30em이라면 10*30의 결과인 300이 값이고 뒤에는 자동으로 px이 붙어서 300px이 된다

• rem

• vw vh

• vmin vmax

  vmax

  vmin

CSS속성

• width(요소의 가로 너비를 지정)

  

  사용법

  width: 크기;

  .box {
    width: 100px;
  }

• height

  

  사용법

  height: 크기;

  .box {
    height: 100px;
  }

  .block-element {
    display: block;
    width: auto;  /* 100% 동등 */
    height: auto;  /* 0 동등 */
  }
  .inline-element {
    display: inline;
    width: auto;  /* 0 동등 */
    height: auto;  /* 0 동등 */
  }

• max-width(요소의 최대 가로 너비를 지정)

  

• min-width(요소의 최소 가로 너비를 지정)

  

• max-height(요소의 최대 세로 너비를 지정)

  

• min-height(요소의 최소 세로 너비를 지정)

  

• margin(요소의 외부 여백을 지정)

  음수값 사용가능

  

  사용법

  margin: 위 우 아래 좌;
  margin: 위 [좌,우] 아래;
  margin: [위,아래] [좌,우];
  margin: [위,아래,좌,우];

  .box {
    margin: 10px 20px 30px 40px;
    margin: 10px 20px 40px;
    margin: 10px 40px;
    margin: 10px;
  }

  자식에서 마진을 %로 주면 부모의 넓이의 %만큼 적용된다

  • margin-top(요소의 '외부(바깥) 위쪽 여백'을 지정)

  • margin-bottom(요소의 '외부(바깥) 아래쪽 여백'을 지정)

  • margin-left(요소의 '외부(바깥) 왼쪽여백'을 지정)

  • margin-right(요소의 '외부(바깥) 오른쪽여백'을 지정)

  .box1 {
    margin: 10px 20px 30px 40px;  /* 단축속성 */
  }
  .box2 {
    /* 개별속성 */
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 40px;
  }

• margin - 중복(마진의 특정 값들이 '중복'되어 합쳐지는 현상)

  1. 형제 요소들의 margin-top과 margin-bottom이 만났을 때

  2. 부모 요소의 margin-top과 자식 요소의 margin-top이 만났을 때

  3. 부모 요소의 margin-bottom과 자식 요소의 margin-bottom이 만났을 때

  

  • 형제 요소에 발생하는 마진 중복 해결(각 형제 요소에 float 속성이 있을 경우)

    <div class="box_group">
      <div class="box"></div>
      <div class="box"></div>
    </div>

    .box_group {
      width: 240px;
    }
    .box {
      width: 200px;
      height: 100px;
      background: red;
      margin: 20px;
      float: left; /* 중복 해결 */
    }

• padding(요소의 '내부(안) 여백'을 지정)

  

  사용법

  padding: 위 우 아래 좌;
  padding: 위 [좌,우] 아래;
  padding: [위,아래] [좌,우];
  padding: [위,아래,좌,우];

  .box {
    padding: 10px 20px 30px 40px;
    padding: 10px 20px 40px;
    padding: 10px 40px;
    padding: 10px;
  }

  • padding-top(요소의 '내부(안) 위쪽 여백'을 지정)

  • padding-bottom(요소의 '내부(안) 아래쪽 여백'을 지정)

  • padding-left(요소의 '내부(안) 왼쪽 여백'을 지정)

  • paddint-right(요소의 '내부(안) 오른쪽여백'을 지정)

  .box1 {
    padding: 10px 20px 30px 40px;  /* 단축속성 */
  }
  .box2 {
    /* 개별속성 */
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-right: 40px;
  }

  • 크기증가(추가된 padding 값만큼 요소의 크기가 커지는 현상)

    /* 100 x 100(px) 크기의 요소 만들기 */
    .box {
      width: 60px; /* +40px */
      height: 80px; /* +20px */
      background: red;
      padding: 10px 20px;
    }

    padding이 추가된 값만큼 width와 height 값을 다시 계산합니다.

• border(요소의 '테두리 선'을 지정)

  

  사용법

  border: 두께 종류 색상;

  .box {
    border: 1px solid red;
  }

  • border-width(선의 두께(너비)를 지정)

    

    사용법

    border-width: 위 우 아래 좌;
    border-width: 위 [좌,우] 아래;
    border-width: [위,아래] [좌,우];
    border-width: [위,아래,좌,우];

    .box {
      border-width: 10px 20px 30px 40px;
      border-width: 10px 20px 40px;
      border-width: 10px 40px;
      border-width: 10px;
    }

  • border-style(선의 종류를 지정)

    

    선종류보기

    사용법

    border-style: 위 우 아래 좌;
    border-style: 위 [좌,우] 아래;
    border-style: [위,아래] [좌,우];
    border-style: [위,아래,좌,우];

    .box {
      border-style: solid dotted double inset;
      border-style: solid dotted inset;
      border-style: solid inset;
      border-style: solid;
    }

  • border-color(선의 색상을 지정)

    

    사용법

    border-color: 위 우 아래 좌;
    border-color: 위 [좌,우] 아래;
    border-color: [위,아래] [좌,우];
    border-color: [위,아래,좌,우];

    .box {
      border-color: red blue #fff rgba(0,0,0,.5);
      border-color: red blue rgba(0,0,0,.5);
      border-color: red rgba(0,0,0,.5);
      border-color: red;
    }

  • 기타속성

    

    

  • box-sizing(요소의 크기 계산 기준을 지정)

    

  • font

    https://happy-noether-c87ffa.netlify.app/presentations/level1/css/properties/

  • display(요소의 박스 타입(유형)을 설정)

    

    

• overflow(요소의 크기 이상으로 내용(자식요소)이 넘쳤을 때, 내용의 보여짐을 제어)

  

  사용법

  overflow: 보여짐제어;

  <div class="parent">
    <div class="child"></div>
  </div>

  .parent {
    width: 200px;
    height: 200px;
    background: yellow;
    overflow: hidden;
  }
  .child {
    width: 100px;
    height: 300px;
    background: red;
  }