국비 3일차

css 파일 경로

• 절대경로
  /css/style.css > 서버가 있어야 가능

• 상대경로
  ./css/style.css

../ 은 상위폴더로 나가겠다는 뜻
./ 현재폴더에서

./css/style.css?worker=hjy&w_date=0926
물음표 뒤에 쓴 것은 영향이 없음
의사소통을 위해 작업 정보 등을 넣는다! (주석 대신)
(작업자 hjy이고 마지막으로 작업한 날 9월 26일)

reset

css reset cdn
https://cdn.jsdelivr.net/
이런 홈페이지 주소가 커뮤니티가 큼
소스 공유/배포가 많다

reset-css@5.0.1
@(Query) 뒤에 버전을 적는 것이다
package.json이 사용설명서 같은 느낌
npm: node package management

폰트 관련 > css 최상위에 넣어주어야

태그만 있는 게 베이스
class는 그 베이스 중에서
특정한 것만 바꾸고 싶을 때 사용

• 베이스는 양이 많아야 함
• 특정 class는 포인트만 변경되어야 함
  (단독 태그에 많은 디테일을 넣으면 안 돼...)

폰트 유전 스타일

font-family
color
line-height
letter-spacing
font-weight

• 인라인형태그 -> 컨텐츠 -> 검색순위 -> 글자 관련 스타일 전부 유효
  -> text-center로 가운데행
  h1~h6, span, strong, input,
  a, button, em, img, video(iframe), p

• 블럭형태그 -> 박스 -> 검색없어 -> margin으로 가운데행

rem은 body사이즈가 기준
em은 부모 태그의 사이즈에 따라 달라짐
(상대개념, 퍼센테이지)

그러므로 em 부모 태그의 폰트 사이즈가 0일 경우
아무것도 안 뜸...

그러다가 다 안 뜰 수도 있으므로 위험하니까
기본 폰트의 반, 1/3 같은 개념으로 쓸 때만 쓰고
나머지는 rem 등 사용

• 인라인형 태그
  strong a span button input img video em h1~h6 p select
  img span a strong input button em tel address video(div태그로 받음) iframe(") reset select

• 인라인형 스타일 5개
  color (a태그만은 유전 예외)
  font-family
  font-size
  line-height (한 줄의 높이: 위 여백 + 글자 높이 + 아래 여백)
  text-align

display

display: inline-block; -> 블럭형으로 바뀌어 블럭스타일 받을 수 있음
ex. a{display: inline-block;} -> 인라인태그를 블럭형으로

<style>
a {
    font-size: 2em;
    line-height: 1;
    margin-bottom: 10px;
    display: inline-block;
}
</style>

a태그에 제일 만만한 거는 span
해야할 게 다르면 클래스를 각각 다르게 준다
(독립 개체 > 애니메이션 별도 설정 필요)

block은 박스 세로 쌓기
inline-block은 박스 가로 나열
inline은 그냥 텍스트 나열

인라인태그는 좌우 스타일은 되지만 상하는 안 먹히기 때문에
block/inline-block을 넣어줘야함!!

그래서 애초에 인라인태그에는
display: block; 가 먹히는 클래스(ex. d-block)를 넣어줘야함

인라인 태그

이 중에 속태그를 넣지 못 하는 태그는? (하위레벨x)
video img input

같이 못 쓰는 태그
a와 button

<a><button></button></a>
<button><a></a></button>

서로 가는 길이 다르기 때문임!!

h1~h6 안에 p 쓸 수 있다? X
제목태그 안에 문장태그 들어갈 수 없다

h2(타이틀)/p(컨텐츠)

아래 코드는 가능하다? X

<p><div></div></p> 

div가 더 큰 범위
권장하지 않는 작성 방법

p의 자식태그로 못 쓰는 것들: h제목태그, video

CSS 실전

div>strong+h2+a>span*3

<div>
    <strong></strong>
    <h2></h2>
    <a href=""><span></span><span></span><span></span></a>
</div>

박스 기준으로 생각 > 큰 태그로 나눠줌 > 독립적인 개체 나눠줌

root 가상 클래스

:root {
    --color-act: red;
}

a{ /* a는 따로 설정해줘야만 */
    color: var(--color-act);
}

페이지 모양 구현

• 좋은 예시

    <div class="titleBox">
        <strong class="active sfont d-block">
            BEST ITEM
        </strong>
        <h2 class="contentTitle">
            많은 소비자들의 사랑을 받은<br>브랜드명 대표 제품
        </h2>
        <!-- a>span.text{More}+span.arrow{화살표이미지}+span.d-block.bar -->
        <a href="">
            <span class="text">More</span><span class="arrow"></span>
            <span class="d-block bar"></span>
        </a>
    </div>
    

• 연습

html

    <div class="titleBox">
        <strong>그 다음으로 중요</strong>
        <h2>이게 더 중요한 <br>타이틀</h2>
        <a href="">
            <span>더보기</span>
            <span>-></span>
            <span></span>
        </a>
    </div>

css

<style>
/* 상위에서는 공통적인 거, 하위로 내려갈 수록 디테일해져야 함 */
/* width height 값은 안 넣을 수록 잘 짜는 사람~~ */
.titleBox{
    width: 33.333vw;
    font-size: 13px; /* desktop default font size: 16px */
    color: #175817;
}

.titleBox strong{
    line-height: 1;
    /* font-size & line-height 이 둘은 세트!! line-height:1;은 폰트 여백없이 딱 맞춘 상태 */
    display: block;
    margin-bottom: 15px;
}

.titleBox h2{
    font-size: 2rem;
    line-height: 1.4;
    color: black;
    margin-bottom: 6rem;
}

.titleBox a{
    /* display: block; */
/* block태그는 width값이 부모 태그랑 똑같아짐 */
    display: inline-block;
/* inline-block태그는 width값이 자식 컨텐츠에 달렸다 */
    text-decoration: none;
    line-height: 3;
}

.titleBox a span:first-child{
    margin-right: 4rem;
}

.titleBox a span:last-child{
    display: block;
    height: 1px;
    background-color: #175817;
}
</style>