UMC_Web_HTML, CSS맛보기

Falco·2022년 4월 1일

UMC2기_WEB

목록 보기

2/9

핵심 키워드 🎯

CSS
html과 css
CSS선택자
CSS 속성
- border, padding, margin, display, position (중요)

CSS 란?
html로 이루어진 웹페이지를 꾸며주는 역할을 함.

<link rel="stylesheet" href="./style.css">

현재 폴더내의 style.css를 사용
상대경로 / 절대경로 차이 알아두기

CSS 선택자
/ { css 속성 : value } /
/ 태그, 클래스, id+ 를 사용하여 속성에 value 지정 /

div{
    width: 100px;
    height: 100px;
    margin: 10px;
    font-size: 30px;
    background-color: blue;
}

 <div class="lightblue">1</div>
 <div class="red lightblue">2</div>
 
.lightblue{
    background-color: lightblue;
}
.red{
    background-color: rebeccapurple;
}

css는 아래에 있는것이 제일 늦게 반영됨.
id선택자 #, class선택자 .
id는 하나만 사용, class는 여러개 사용 가능

우선순위 id > class == 가상 선택자 > tag 순서

.lightblue{
    background-color: lightblue ! important;
}
!important로 우선순위 땡길 수 있음

가상 선택자(active, hover, focus)
특정 태그에만 지정가능한 것도 있음 (focus)

div:hover{
    background-color: gray;
}

input:focus{
    background-color: brown;
}

CSS 속성

여러가지 CSS 속성 mdn

블록 태그 : p, div, ul, li, h1~h6
인라인 태그 : span, a, img, button
등등..

p, span{
    width: 100px;
    height: 100px;
    background-color: coral;
}

인라인 태그인 span에는 width, height가 적용되지 않는다.

p{
    display: inline;
}
디스플레이를 inline, inline-block으로 바꿀 수 있음

p:nth-child(7){
    /* display: none; */
    margin: 20px 10px;
}

nth-child(7)이란 p가 아닌 태그도 카운트를 하는 듯
7번째 P태그의 마진을 변경하는 소스

마진과 패딩의 차이란?

p:nth-child(7){
/* display: none; */
margin: 20px 10px 50px 60px;
padding: 10px;
border : 5px solid blue;
border-left-width: 14px;
box-sizing: border-box;
}

Margin 은 위 오른쪽 아래 왼쪽 (시계방향)
border-box : padding + border + content가 width, height로 맞춰짐
단위 : %, em(부모에 대하여), rem(루트에 대하여) 상대단위, px 은 절대단위
선택자 상속 :

<div> // 1
  <ul> // 2
    <li></li> // 3
    <li class="orange"></li> // 4
    <li></li> // 5
    <li></li> // 6
  </ul>
</div>

li.orange {} : li와 .orange가 동시에 일치되어야 선택됨 (일치 선택자) → 4
ul > li {} : ul의 자식인 li를 전부 선택됨 (자식 선택자) → 3, 4, 5, 6
div .orange {} : div속에 있는 모든 선택자 중에서 .orange가 선택됨 (후손(하위) 선택자) → 4
.orange + li {} : .orange다음에 오는 형제 li 1개가 선택됨 (인접 형제요소 선택자) → 5
.orange ~ li {} : .orange다음에 오는 형제 li가 모두 선택됨 (일반 형제요소 선택자) → 5, 6


  <div>
        <span>1000</span>
  </div>
    
html{
    font-size: 16px;
}
div{
    font-size: 1.5rem;
}
div span{
    font-size: 1.2em;
}

이러한 식으로 적으면 div span의 텍스트 사이즈는 28px이 됨
반응형 웹페이지를 위해 px 보다는 em, rem을 사용하자

브라우저마다 각각의 userstylesheet을 가지고 있음.
reset css를 하여 브라우저가 가진 스타일을 초기화 가능
*{}을 사용하여 margin과 padding을 없앨 수 있음

*{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}

인라인 블럭의 태그와 태그사이 에는 어쩔수 없이 공백이 들어감

이를 해결하기 위해서는 flexbox 사용

Flex Box
부모태그인 Flex Container에 디스플레이 태그를 flex로 지정한다.

 <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>
        <div class="flex-item">8</div>
        <div class="flex-item">9</div>
        <div class="flex-item">10</div>
    </div>
    
    .flex-container{
    background-color: teal;
    height: 100vh;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: nowrap;
    align-content: space-between;
}

-------css-------------

.flex-item{
    background-color: tomato;
    width: 100px;
    height: 100px;
    border: 3px solid black;
    font-size: 30px;
    font-weight: bold;
}

.flex-item:nth-child(3n){
    flex-grow: 2;
    flex-shrink: 3;
}
.flex-item:nth-child(4n){
    flex-grow: 3;
    flex-shrink: 2;
}

main axis와 cross axis는 서로상하관계 flow-direction으로 바뀔 수 있음.
반응형 웹 페이지에 최적화 되어있음.

속성

flex-direction
flex 아이템 방향
- row(default): 좌에서 우로
- row-reverse: 우에서 좌로
- column: 위에서 아래로
- column-reverse: 아래에서 위로
flex-wrap
다음 화면으로 넘어갈지 안넘어갈지
default : flex-wrap: nowrap
justify-content
align items
align contents
flex-grow
flex-shrink