국비 2일차

JAY·2022년 9월 23일

국비 공부

목록 보기

2/86

html5 에밋

<!DOCTYPE html>
<html lang="ko"> <!--이 부분이 en으로 되어 있으면 크롬에서 변역 요구함-->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--에밋에서 이 부분이 없으면 실제 화소로 계산 -> 모바일 환경에서 pc레이아웃으로 넘어가버림-->
    <title>Document</title>
</head>
<body>
    
</body>
</html>

src href

src: html에게 의존, 무거우면 늦게 열린다
href: html과 독립

html은 src를 먼저 오픈시키고자 한 다음에 href 오픈
그래서 href 및 태그들 먼저 올리고 js src 나중에
(에러나면 너무 느려지니까 최대한 미뤄야)

href는 내 중심으로 코딩해도 되지만 src는 html 효율성 고려해야

js basic

<script>
document.body
document.head

//document.get... (body나 head 밑의 태그 등의 요소를 잡아오는 용도)
document.getElementById("#box"); //단수를 잡는 넘
document.getElementsByTagName("div"); //복수를 잡는 넘
</script>

ID는 딱 하나밖에 없기 때문에 효율적
div는 여러 개이므로 어느 것인지 모르므로 스피드 떨어짐

innerHTML은 객체이므로 대입식으로 써야함 (메서드 아님!!)
(여기에는 id적을 때 ""안에 # 붙이면 안 돼 이미 id를 고를 예정이므로)

<script>
document.getElementById("box").innerHTML = "<h2>드디어 조작했다</h2>";

document.getElementById("box").innerHTML += "<h2>드디어 조작했다</h2>";
//이렇게하면 #box 안 기존 값에 innerHTML 값이 추가로 들어감
</script>

= : 다 초기화 시키고 들어감
+= : 추가적으로 값을 넣음

문자화 시키는 게 중요...

SCSS

요소검사 가능
동적 사용 가능

작업 진행 준비 확장팩

CSS의 원본!인 Sass
이걸 컴파일해줄 Live Sass Compiler가 필요
서버 접속 위한 SFTP 설치

container

grid-system / style guide
width값 할당
전체적인 스타일 담당 (어떤 컨포넌트에서도 사용됨)

네비게이션 (메뉴들)

글로벌네비게이션 gnb
로컬네비게이션 lnb
컨텐츠네비게이션 cnb

<!--header#hd>.container>h1>a>img^^ul#gnb>li.gnb$*4>a{대메뉴$}-->
    <header id="hd">
        <div class="container">
            <h1><a href=""><img src="" alt=""></a></h1>
            <ul id="gnb">
                <li class="gnb1"><a href="">대메뉴1</a></li>
                <li class="gnb2"><a href="">대메뉴2</a></li>
                <li class="gnb3"><a href="">대메뉴3</a></li>
                <li class="gnb4"><a href="">대메뉴4</a></li>
            </ul>
        </div>
    </header>

$는 변수!

display: flex;

수직 수평 정렬을 내맘대로 할 수 있음
디폴트값은 수평 나열

justify / align

justify x축
align y축

display: flex; 로 컨텐츠 수평나열
justify-content: space-between; 으로 좌우로 찢어줌 (x축 좌우로 찢음)
align-items: center;로 각 위치의 중간지점을 맞춰줌 (y축 정렬)

헤더 네비게이션 에밋

<!-- header#hd>.container>h1>a>img^^ul#gnb>li*4>a.d1{대메뉴}+ul.d2>li*4>a{소메뉴들} -->

<header id="hd">
    <div class="container">
        <h1><a href=""><img src="" alt=""></a></h1>
        <ul id="gnb">
            <li>
                <a href="" class="d1">대메뉴</a>
                <ul class="d2">
                    <li><a href="">소메뉴들</a></li>
                    <li><a href="">소메뉴들</a></li>
                    <li><a href="">소메뉴들</a></li>
                    <li><a href="">소메뉴들</a></li>
                </ul>
            </li>
            <li>
                <a href="" class="d1">대메뉴</a>
                <ul class="d2">
                    <li><a href="">소메뉴들</a></li>
                    <li><a href="">소메뉴들</a></li>
                    <li><a href="">소메뉴들</a></li>
                    <li><a href="">소메뉴들</a></li>
                </ul>
            </li>
            <li>
                <a href="" class="d1">대메뉴</a>
                <ul class="d2">
                    <li><a href="">소메뉴들</a></li>
                    <li><a href="">소메뉴들</a></li>
                    <li><a href="">소메뉴들</a></li>
                    <li><a href="">소메뉴들</a></li>
                </ul>
            </li>
            <li>
                <a href="" class="d1">대메뉴</a>
                <ul class="d2">
                    <li><a href="">소메뉴들</a></li>
                    <li><a href="">소메뉴들</a></li>
                    <li><a href="">소메뉴들</a></li>
                    <li><a href="">소메뉴들</a></li>
                </ul>
            </li>
        </ul>
    </div>
</header>

단위

rem : 제일 많이 씀. 글자 크기 기준

반응형
vw : view width 화면 넓이
vh : view height 화면 높이

min-width : 최소 너비
max-width : 최대 너비


<style>
		div {
            position: fixed;  /* fixed는 브라우저 화면 기준 */
            width: 10vw; height: 10vh;
            min-width: 80px; max-width: 130px;
            background-color: black;
            color: white;
            border-radius: 50% 0;
        }
        #box1 {
            left: 10rem;
            top: 10rem;
        }
        #box2 {
            right: 10px;
            top: 10px;
        }
        #box3 {
            left: 10px;
            bottom: 10px;
        }
        #box4 {
            right: 10px;
            bottom: 10px;
        }
        
</style>

or root 가상 클래스 사용

    <style>
        
        
        /* 변수들을 모아주는 용도 (자바스크립트처럼)*/
        :root {
        /* - 를 쓰는 것과 충돌 안 되도록 변수 이름 정해줄 때 앞에 -- 넣어줘야 좋음 */
            --px-10 : 10px;
            --box-wh : 10vw;
        }
        div{
            position: fixed;  /* fixed는 브라우저 화면 기준 */
            width: var(--box-wh); height: 10vh;
            min-width: 80px; max-width: 130px;
            
            background-color: black;
            color: white;
            border-radius: 50% 0;
        }
        #box1 {
            left: var(--px-10);
            top: var(--px-10);
        }
        #box2 {
            right: var(--px-10);
            top: var(--px-10);
        }
        #box3 {
            left: var(--px-10);
            bottom: var(--px-10);
        }
        #box4 {
            right: var(--px-10);
            bottom: var(--px-10);
        }
    </style>

기능

공통 클래스는 가장 높은 곳(가장 중요도 낮음)에 둬야 수정 굿

속성 값 4개일 경우 위부터 시계방향, 2개는 상하 좌우

<style>
* { /* *(벡셀)표는 전체 선택 */
    margin: 0; padding: 0; /* 여백 없이 깔끔하게 */
}
</style>

하나만 찾고 싶을 때

<style>
#gnb li:nth-child(num) a{} /* > (n)번 째 li의 a */
#gnb li:nth-child(2n) a{} /* 2의 배수 */
</style>

하나만 빼고 고르고 싶을 때

<style>
#gnb li:not(.gnb3) a{} /* ex. (class gnb3)을 제외하고 */
#gnb li:not(.gnb3) a{}
</style>

이어서 css 결과물 전달할 때

기준: 같은 부모를 가지고 있어야 함
+: 일반 형제 선택자: A+B > A 바로 다음에 오는 B에만 적용
~: 인접 형제 선택자: A~B > A 뒤에 오는 모든 B에 적용

<style>
/* ex01 */
#gnb li + li{} /* 첫째의 것을 나머지애들이 다 물려 받음 */
/* = */
#gnb li:not(:first-child){} /* 그러므로 이 코드와 동일하다 */

#gnb li:first-child + li{} /* 자세하게 지정 > 고정되었으므로 둘째만 바뀜 */

#gnb li + li + li + li{} /* 계속 옮겨가므로 결국 마지막 애만 받음 */

#gnb li ~ li{} /* li 뒤에 오는 li에 모두 적용 */
</style>

ID

Id는 #으로 표시
한 페이지 내에 하나만 사용 (중복되지 않도록)
스피드가 빠름
스타일 우선선위가 높음
자바스크립트 선택자로서 스피드가 빠름
단수명령

클래스

다중객체의 스타일 적용에 최적화 > 부트스트랩(프레임워크)

후손선택자 -> 공백으로 표기
자손선택자 ->ㅣ 에밋과 동일 '>'로 표기

'+' 선택자 -> 바로 아래 동생

'~' 선택자 -> 동생들 (나 빼고 모두)
:nth_child(순번) -> n번째 객체
:not(제외 객체)

position

fixed(화면), absolute(부모), relative(가장 가까이 있는 상위객체)
absolute는 상위 객체 명령듣고자 함
relative 상관없이 다 명령 고고 (유기적으로 움직이는 객체)

top, left, right, bottom, x-index 도 있다~