2024.03.12 15일차 CSS

상속

상속이란 부모요소에 적용한 스타일이 후손요소들에게까지 영향을 주는 특성을 말합니다.
하지만 모든 속성들이 상속되는 것이 아닙니다.

상속이 적용되는 속성들
1. font 관련 속성: font-size, font-weight, font-style, line-height, font-family, color
2. text 관련 속성: text-align, text-indent, text-decoration, letter-spacing, opacity

** 텍스트 관련 속성들만 상속

우선순위

우선순위 규칙
- 명시도 점수
  - !important: 무한대 점
  - 인라인 스타일: 1000점
  - 아이디 선택자: 100점
  - 클래스 선택자: 10점
  - 태그 선택자: 1점
  - 전체 선택자: 0점
  - :hover, :active, :first-child와 같은 가상 클래스는 클래스 선택자로 취급하여 10점
  - ::before, ::after와 같은 가상요소는 태그선택자로 취급되어 1점
  - :not()은 점수가 0점
명시도 점수가 높은 선언이 우선
점수가 같은 경우 가장 마지막에 해석되는 선언이 우선
명시도 점수는 상속보다 우선
!important가 적용된 선언방식이 최우선

ex) a {} 1점

a:hover 11점

a::before 2 점

    /* 100+1 = 101점 */
    #aaa h1 {
      color: gray;
    }
    /* 1점 */    
    h1 {
      color: lightcoral;
    }
    /* 11점 */
    .bbb h1 {
      color: orangered;
    }
    /* 112점 tag2개라서 ----> 적용*/
    #aaa div.bbb h1 {
      color: greenyellow;
    }
    /* 111점 */
    #aaa .bbb h1 {
      color: tomato;
    }
    /* 12점 */
    div.bbb > h1 {
      color: violet;
    }
    
    /* 1+100+1+0+10 = 112점 */
    ul#fruit > li:not(.orange) {} 
    
<!-- #aaa>.bbb>h1{안녕하세요6} -->
  <div id="aaa">
    <div class="bbb">
      <h1>안녕하세요6</h1>  <!--만약에 인라인 스타일 쓰면 우선 적용-->
    </div>
  </div>

** 실무에서는 important 없이

조상을 많이 나열해서 우선순위를 높임 (인라인 스타일도 사용X)

/* 네이버, 조상을 최대한 많이 나열해서 우선순위 up */
#header .header_inner .shortcut_list .service_name {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    margin-top: 7px;
    line-height: 20px;
    text-align: center;
}

단위

px, %

px 단위는 픽셀이라는 뜻이며 화면에 고정적인 길이, 절대값
1px은 디바이스마다 고정크기가 다를 수 있음
% 단위는 부모요소 대비 비율적 영향을 받습니다.

* .root w50% → body 대비 50% (body > .root)

* .parent 50% → root 대비 50%

* margin 도 % 사용 가능

=> 와이어프레임 설계 시, 적응형 사이트를 만들 때 퍼센트로 쓰면 좀더 편함

em, rem

em 단위는 요소 자기 자신의 font-size에 따라 결정됨
rem단위는 html태그에서 지정한 font-size에 따라 결정됨
html태그에는 기본값으로 16px이 정의
따라서 따로 font-size를 조절하지 않으면 2rem은 32px이됩니다.

* 16픽셀의 40em ⇒ 16*40 = 640 (개발자도구로 검사 시 테두리2px씩 더해서 644로 나오기도 함)

* 자기자신 폰트사이즈 10px → 40em ⇒ 400픽셀

* rem 사용 시 html로 10px하면 전부 상속되어 모든 글씨가 작으니까
계산하기 쉽게 html 10px로 두고, body에 font-size:18px; 이런 식으로 적용해서 폰트 크기 조절

vw, vh

뷰포트(디바이스 화면)를 기준으로 설정되는 길이 단위, 0~100사이의 값
뷰포트란 화면 전체 크기를 의미, 어떤 이미지의 높이값을 100vh로 지정하면
데스크탑 화면이든 태블릿, 모바일 화면과 관계없이 높이가 화면 전체를 꽉 채움

* 주의! 기본적으로 CSS는 div에 세로 길이가 없으면 화면에 안 보임 (가로는 보통 기본값 100%)

*** w25p w25e w25r => 에밋문법으로 p는 %, e는 em, r은 rem

박스 관련 속성

width, height

width: auto; 100%(기본값)

height: auto; 컨텐츠 크기대로(기본값 0px)

** container height 50% → 아무것도 안 보임 (body 높이가 0이라서)

    .container {
      background: orange;
      /* padding: 20px 0; */
      box-sizing: border-box;
      width: 70%;
      height: 300px;
    }
    .box {
      background: greenyellow;
      height: 50%; /* */
    }
    .item {
      background: violet;
      height: 50%;
    }

max-width, min-width

* max 500

부모400 → 자식 400, 부모 600 → 자식 500

* min 200

부모 400 → 자식 400, 부모 100 → 자식 200

** max-height, min-height 동일

margin

개별 속성 : margin-top, margin-right, margin-bottom, margin-left

단축 속성 : margin: 10px 20px 5px 이렇게 한 줄로 사용

    .box {
      width: 25%;
      height: 100px;
      border: 4px solid gray;
      background: #333;
    }
    .box:first-child {
      margin-bottom: 20px;
    }
    .box:last-child {
      margin-left: 5px;
      /* 위의 margin bottom이랑 충돌하면 큰거에 먹힘 */
      margin-top: 5px;
      margin-right: 5px;
      margin-bottom: 5px;
      /* 4방향에 전부 5px 씩 마진 추가 */
      margin: 7px;
      /* [상하] [좌우] */
      margin: 10px 20px;
      /* [상] [좌우] [하] */
      margin: 10px 20px 30px;
      /* 12시부터 시계방향 t->r->b->l */
      margin: 10px 20px 30px 40px;
    }

    // 중앙 배치
    section {
      width: 474px;
      border: 4px solid greenyellow;

    }
    section h1 {
      width: 237px; // 50%
      border: 4px solid violet;
      text-align: center;
      margin-left: 118.5px; --> 일일이 고쳐주기 보다 % 사용 // 25% // auto
      margin-right: 118.5px; // 25% // auto
    }

** 만약 h1 width 50% → 70% 로 바꾸면?

직접 바꾸는 것 보다 margin-left, margin-right 모두 auto로 설정하면 중앙으로 정렬

*** 주의!

부모 요소가 width 100%라면 여유 마진이 없기 때문에 auto 적용할 마진도 없어서 적용 불가

마진 분배를 통해 박스 X축 정렬을 하려고 할 때
가로길이가 100%면 여유마진이 없어서 분배를 못하므로 정렬이 안 됨
상하 여백 역시 세로 길이를 제한해야 auto 가능

    section h2 {
      /* 여유마진이 없음 w100% 기본값 숨김상태*/
      margin: 10px auto;
      /* w50p 이렇게 가로를 줄여줘야 자동 정렬됨 */
      width: fit-content; /* 또는 fit-content */
      text-align: center;
    }

padding

안쪽 여백
패딩을 쓰면 박스 크기가 변함 (본인 크기 + 패딩)
박스크기가 변하면 레이아웃이 깨지기 쉬움 ⇒ 가로세로 주의!
가로 400, 세로 430 해야 가로세로 변동없이 패딩 추가 가능
패딩 자동계산
box-sizing: border-box ***** → 전체 선택자로 box-sizing: border-box

** box-sizing: content-box (기본값)

    .container {
      width: 500px;
      height: 500px;
      background: orange;
      margin: 100px;
      padding-left: 50px;
      padding-right: 50px;
      padding-top: 40px;
      padding-bottom: 30px;
    }
    // container 600 * 570

border

패딩처럼 보더로 인해 박스가 늘어남 → boxsizing borderbox 써야 함
border-style이 없으면 테두리는 화면에 보이지 않음
border-width : 선의 두께 (기본값 medium)
border-style : 선의 종류 (기본값 none) solid / dashed / dotted / double / none / groove, ridge, inset, outset
border-color : 선의 색상 (기본값 black)

display

요소가 화면에 보여지는 특성을 지정
block : 블록 요소 지정
inline : 인라인 요소 지정
inline-block : 인라인 요소 + 너비, 높이 지정 가능
none : 요소를 사라지게 함 (다음 요소가 자리 차지)
flex, grid 등

인라인 상태에서 마진은 안 먹음 → block 상태에선 모두 적용됨

a태그 원래 인라인속성이라 해당 링크를 클릭해야 하는데

a 디스플레이 블록으로 바꾸니 가로세로 조정해서 클릭영역을 넓게 쓸 수 있음

overflow

박스 안의 내용이 박스보다 클 경우 넘치는 부분을 제어
visible (기본값) : 전체를 보여줌
hidden : 넘치는 컨텐츠를 숨김
auto : 넘치는 컨텐츠가 존재할 경우에만 스크롤바 생성
scroll : 스크롤바 생성

opacity

요소의 투명도 지정
0 : 투명, 1 : 불투명
0 ~ 1 사이의 소수점 숫자로 설정
0으로 투명해진 경우 화면에 보이지 않고 자리 유지
단, 투명해진 요소에 마우스 호버 시 입력 커서로 변하는 등 알 수 있음
요소를 숨기는 용도로 사용하기 보다는 자연스러운 애니메이션 효과를 위해 사용

cf. visiblity: hidden : 자리 유지 + 보이지 않음

Reset CSS

브라우저가 이미 태그 자체에 설정한 margin, font-size 등 존재 (ex. body, h1 ... )

한 번에 설정하기 위해 사용하는 것이 reset css

https://www.jsdelivr.com/package/npm/reset-css

jsDelivr - A free, fast, and reliable CDN for JS and Open Source

Optimized for JS and ESM delivery from npm and GitHub. Works with all web formats. Serving more than 150 billion requests per month.

www.jsdelivr.com

다양한 reset css가 있지만 위의 링크를 활용한다면 HTML 문서 중 head에 복붙해 사용

마지막에 해석, 즉 아래에 있는 코드일 수록 우선순위가 높으므로 다른 css 보다 위에 사용하는 것을 권장

  <link rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css">
  
  /* library css */

  /* 내 커스텀 css */

화면을 보고 구조 잡기

일반적으로 아래의 순서대로 구조를 잡음

크기가 큰 구조 → 작은 요소

왼쪽 요소 → 오른쪽 요소

화면 위 → 화면 아래

+ 궁금한 점 개인 학습

transition은 배웠는데 좀더 실제 사용하는 애니메이션 효과를 추가하기 위해 transform 검색

크롬에서 호버 시 이미지가 확대되는 느낌을 주기 위해 transform: scale(1.2)를 사용하면 됨

transition: transform 0.3s; 은 호버 되기 전의 이미지에 설정해야 hover 설정, 해제 모두 부드러운 애니메이션이 적용됨

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

box-sizing: border-box;

}

.container {

display: flex;

font-family: '나눔고딕';

color: rgb(43, 36, 36);

}

.card {

width: 250px;

height: 350px;

border: 2px solid rgb(201, 201, 201);

margin: 50px auto;

border-radius: 15px;

box-shadow: 2px 2px 5px 3px #c7c7c7;

padding: 10px;

}

.card .image {

border: 2px solid lightgray;

height: 250px;

border-radius: 15px;

background: whitesmoke;

overflow: hidden;

}

.card .content {

/* background: black; */

}

.card .image img {

width: 100%;

transition: transform 0.3s;

}

.imgs {

height: 100%;

}

img:hover {

transform: scale(1.2);

}

</style>

</head>

<body>

</div>

2024.03.12 바다

</p>

</div>

</div>

2024.03.12 하늘

</p>

</div>

</div>

2024.03.12 산

</p>

</div>

</body>

</html>

코딩 일지

2024.03.12 15일차 CSS

상속

우선순위

단위

px, %

em, rem

vw, vh

박스 관련 속성

width, height

max-width, min-width

margin

padding

border

display

overflow

opacity

화면을 보고 구조 잡기

티스토리툴바

2024.03.12 15일차 CSS

상속

우선순위

단위

px, %

em, rem

vw, vh

박스 관련 속성

width, height

max-width, min-width

margin

padding

border

display

overflow

opacity

화면을 보고 구조 잡기

관련글

티스토리툴바