[udemy] web developer CSS

Language

[udemy] web developer CSS

jaewpark 2022. 4. 29. 16:01

css의 부분은 관심이 있어서 이것저것 만지고 다른 사람들 한 것을 참고하다보면서 익숙해진 부분도 있어서 모든 것을 기록하기 보다는 몰랐던 부분만 기록할 예정입니다.

CSS 선택자

:hover : html 요소에 마우스를 올렸을 때 반응하게 하는 css 요소

:active : 사용자가 활성화한 요소, 활성은 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미

:nth-of-type() : 동일한 유형(태그 이름)의 형제 간의 위치를 기반으로 요소를 일치

예를 들자면, p:nth-of-type(2n) { color: blue } 짝수마다 색깔이 파란색을 적용

:checked : on 상태인 라디오(<input type="radio">), 체크박스(<input type="checkbox">), 옵션(<option>) 요소

::before : 선택한 요소의 첫 자식으로 의사 요소를 하나 생성

::after : 선택한 요소의 맨 마지막 자식으로 의사 요소를 하나 생성

::first-letter : 첫 번째 줄의 첫 글자에 스타일을 적용

::first-line : 첫 번째 줄에 스타일을 적용

::selection : 사용자가 강조 표시한 문서 부분에 스타일을 적용

CSS 우선 순위 : (참고)

border (참고)
padding (참고)
margin (참고)

ems 그리거 rems (참고)

em 단위는 "부모 요소의 글꼴 크기" 를 의미합니다. ems class 가 있는 <ul> 내부의 <li> 요소는 부모로부터 크기를 가져옵니다. 따라서 각 중첩 부분은 글꼴 크기가 부모 글꼴 크기의 1.3em — 1.3 배로 설정되므로 점점 더 커집니다.

rem 단위는 "루트 요소의 글꼴 크기" 를 의미합니다. ("root em" 의 rem 표준입니다.) rems class 가 있는 <ul> 내부의 <li> 요소는 루트 요소는 (<html>) 에서 크기를 가져옵니다. 이것은 각각의 연속적인 중첩 부분이 계속 커지는 것을 의미합니다.

rgba()

: 빨강, 초록, 파랑 성분에 따라 색을 표현한다. 선택적 알파 구성 요소는 색상의 투명도입니다.

position (참고)

transition (참고) : :hover 이나 :active 같이 사용하면서 극적인 변화를 보일 수 있습니다.

background (참고)

font-family (참고) : 글씨체를 바꿀 수도 있습니다. (다운 혹은 구글 글꼴 등 다양한 방법으로 사용 가능)

예제

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="photo.css" />
    <title>Test</title>
  </head>
  <body>
    <nav>W/B Gallery</nav>

    <img
      src="https://cdn.pixabay.com/photo/2013/03/02/02/41/alley-89197__480.jpg"
    /><img
      src="https://cdn.pixabay.com/photo/2016/11/29/09/16/architecture-1868667__340.jpg"
    /><img
      src="https://cdn.pixabay.com/photo/2017/03/29/15/18/tianjin-2185510__340.jpg"
    />

    <img
      src="https://cdn.pixabay.com/photo/2016/11/22/19/17/buildings-1850129__340.jpg"
    /><img
      src="https://cdn.pixabay.com/photo/2022/04/03/22/05/buildings-7109918__340.jpg"
    /><img
      src="https://cdn.pixabay.com/photo/2022/04/18/02/24/architecture-7139263__340.jpg"
    />

    <img
      src="https://cdn.pixabay.com/photo/2021/12/19/12/27/road-6881040__340.jpg"
    /><img
      src="https://cdn.pixabay.com/photo/2022/01/07/07/13/chicago-6921297__340.jpg"
    /><img
      src="https://cdn.pixabay.com/photo/2022/03/27/12/46/china-7094961__340.jpg"
    />
  </body>
</html>

img {
  width: 30%;
  margin: calc(10% / 6);
}

nav {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.5em;
  text-transform: uppercase;
  border-bottom: 2px solid #f1f1f1;
  width: 30%;
  margin-left: calc(10% / 6);
  padding: 1.2em 0;
}

Flexbox (참고1) (참고2)

: 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드입니다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형

@media (참고)

: 스타일 시트의 일부를 하나 이상의 미디어 쿼리 결과에 따라 적용할 때 사용

/* 600 ~ 800px color is purple */
@media (min-width: 600px) and (max-width: 800px) {
  h1 {
    color: purple;
  }
}

--------------------------------------------------

/* red / orange / yellow 크기별 색깔 */
h1 {
  color: red;
}

@media (min-width: 500px) {
  h1 {
    color: orange;
  }
}

@media (min-width: 1000px) {
  h1 {
    color: yellow;
  }
}

/* nav 웹 브라우저 창 크기에 따라 배치 변화 */
@media (max-width: 768px) {
  h1 {
    font-size: 4em;
  }
  nav, nav ul {
    flex-direction: column;
    align-items: center;
  }
}

그리고 부트스트랩 (여기)