웹 프론트엔드(web front end) 기초02

1. CSS 박스 모델

모든 html 요소는 박스의 형태로 배치가 됨 -> CSS 박스 모델
영역 구성 : 내용(content) 영역 -> 안쪽 여백 영역(padding) -> 테두리 영역(border) -> 바깥 여백 영역(margin)
paddig, border, margin 영역 모두 상화좌우 영역 값 조정 가능

1) content 영역

width, height 로 영역 조정 가능(고정, 상대값 모두 가능 -> px , em , %)
w,h 값 없으면 글씨 크기 만큼의 영역이 지정
inline 요소의 경우 (a, span) w,h 의 영향을 받지 않음.
단, img 요소와 같은 멀티미디어 요소의 경우 w,h 값의 영향을 받음

2) paddig 영역

배경색 또는 배경이미지가 적용되는 박스의 내부 영역 임
단축 표기법 : 위쪽 오른쪽 아래쪽 왼쪽 (시계 방향)

3) border 영역

값이 없으면 어떤 스타일도 적용X
width 값 , style 값, color 값을 지정 가능

4) margin 영역

배경 적용이 안되는 외부 영역
마진끼리 맞닿는 경우 , 큰 마진값을 가진 요소를 간격으로 적용함 -> 마진통합, 마진 상쇄

5) box-sizing :

기본으로 content-box 값으로 되어 있지만 패딩과 보더 사이즈 까지 고려하기엔 번거러움(패딩과 보더값은 영향을 안받아서)
border-box 값으로 넣어주면 레이아웃하기에 편하고 패딩과 보더를 포함해서 계산되어 content가 알아서 줄어 들음

2. normal flow 벗어난 레이아웃

CSS의 상황을 아무것도 안건드린 상태 -> normal flow
원래 블록 요소는 다른 요소와 배치가 안됨 -> display: inline 시 같이 배치가 됨. 단, width 값은 적용이 안됨
- display: inline-block 을 사용하면 inline 처럼 배치가 되고 block 처럼 넓이 높이 값을 줄 수 있음

1) float

띄우는 속성, 여백 , 다단?(column 요소)
글, 이미지 등의 요소들을 같이 배치하면서 각 요소가 자연스럽게 흐르게 만들기 위함
img{float: 방향} : left right
그런데 여백이 남으면 지정하지 않은 다른 요소도 채워 넣기 때문에 clear 속성이 필요함

2) position

static : 기본 값이며 normal flow 내에서 배치
relative : top, left, right 등으로 상대적으로 위치가 변함 (단, 원래 공간 차지하는 영역은 안변하고 표시 위치만 바뀌는 것)
absolute : top, left, right 등으로 절대적으로 위치가 변함 (자신의 원래 공간도 없어지고 덮어쓰는 형식으로 보임)
- static이 아닌 부모 요소를 기준으로 위치를 함
- 유지보수가 어려움(다같이 움직이지 않아서)
fixed : 스크롤이 생겨도 그 자리에 계속 있음(브라우저 창을 기준으로 위치 선정)

3. CSS 선택자(Selector)

1) class 선택자

html에서는 띄어쓰기로 여러개의 선택자를 지정할 수 있음 class="class-selector selector" -> class-selector , selector 따로 css에서 지정 가능

2) tag 선택자

html에서 직접적인 기능을 하는 태그이름을 가지고 css 가능함 근데 유지 보수가 어려움 보통

3) id 선택자

css에서는 html 이름에 #을 붙여서 지칭, 문서에 이름을 딱 한번만 사용 가능하고 중복으로는 불가능 함, class 이름 중복 주어도 class가 적용안되고 id 선택자 내용이 덮어 쓰게 됨 -> 선택자 우선순위

4) 선택자 적용 우선 순위

id 선택자 > class 선택자 > tag 선택자 (id 선택자가 제일 우선 순위)

5) 다중 선택

CSS에서 , 콤마를 통해서 여러개 다중 선택해서 한번에 스타일 적용이 가능

6) 특정 선택

특정 클래스에 따른 요소 선택법
- ex) div.region p {} : region 클래스를 가지는 div 요소의 p요소를 선택한다.

특정 클래스의 특정 하위 클래스 요소 선택법
- ex) .region .korea{} : region 클래스 가지는 모든 요소의 하위에 포함된 korea 클래스 요소를 선택 띄어쓰기

특정 클래스들을 모두 충족하는 요소 선택법
- ex) .region.korea{} : region 클래스, korea 클래스를 모두 가지고 있는 요소를 선택 띄어쓰기 X

특정 클래스의 직계 자식 요소 선택법
- ex) .container > p {} : container 클래스의 직계 자식 p 만 선택해라

특정 속성이 있는 요소 선택법
- ex) a[title] {} : a 요소 중에서 title 속성이 있는 모든 요소를 선택 title-> 위에 커서 올리면 뜨는 박스

7) 가상 선택자(조건문 같은 느낌)

a:hover {} : a 요소에 마우스가 올라가 있는 경우
a:active {} : a 요소가 활성화 되있는 경우
a:focus {} : a 요소가 키보드로 선택되어 있을 때(tab 키로)
li:first-child {} : li 요소 중에서 첫 번째 li 요소 선택
li:last-child {} : li 요소 중에서 마지막 li 요소 선택
li:nth-child(2) {} : li 요소 중에서 두번째 li 요소 선택 (2n넣으면 짝수만 가능)
.container div:last-of-type {} : container 클래스 안에서 div type 중에서 마지막 요소를 선택해라

8) 가상 요소

h2::before {content: ">"} : h2요소 앞에(전에) >를 넣어라 (디버깅 상태에서 요소선택이 안됨)

9) 구체성 값

id 선택자 : 100점
Class 선택자, 가상 클래스 : 10점
태그 선택자 및 가상요소 : 1점

10) cascading

스타일을 여러번 적용하는건 문제가 안됨

4. 환경설정

1) VScode 설치 & 익스텐션

HTML Snippets(단축키)
Live Server(자동 서버 연동)
Prettier - code formatter(인덴트,tidy 기능)

2) Chrome 웹스토어

Web Developer 확장 프로그램 추가
- css 지우는 기능, Tool(유효성 검사, color picker, ruler 기능 등이 있음)
whatfont 확장 프로그램 추가
- 폰트 알아보기 좋음

5. VScode를 활용한 실습

index.html 파일 생성
! + tab : 문서 구조 자동으로 생성

1) 문서 구조

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Web framework fo perfectionists with deadlines | Django</title>
    <link rel="stylesheet" href="./style.css">
    <!-- 상대요소: 지금 현재 내 위치에서의 파일 위치를 알려줌-->
    <!-- 절대요소: 특정 파일의 고유한 경로 -->
</head>
<body>

</body>
</html>

<!doctype html> : 문서 타입 선언, 어떤 버전으로 만들어 졌는지 브라우저에게 알려주는 선언문(무조건 최상단에)
<html lang="en"> : html요소 (루트 요소), lang 속성 -> 어떤 언어로 작성되어 있는지 알려줌(한글은 "ko")
<head> : head 태그 요소, 문서의 기본 설정과 스타일 시트 파일연결 등의 여러 역할을 함(필수적임)
- <meta charset="UTF-8"> : 문자 집합 및 문자 인코딩 관련
- <meta name="viewport" content="width=device-width, initial-scale=1.0"> : 반응형 웹사이트를 만들기 위해서 선언, 브라우저 크기에 따라서 모양 배치가 변하는 웹사이트, content를 디바이스 넓이에 맞게 표기해라는 뜻, 배율을 1.0(100프로)로 표시하라는 뜻
- <meta http-equiv="X-UA-Compatible" content="ie=edge"> : 인터넷 익스플로어를 가지고 렌더링 하는 경우 관련, 최신버전으로 렌더링을 해라라는 뜻
- <title> : 페이지 제목, 핵심 키워드 넣어주는게 좋음
link + tab -> link 태그 작성됨
- rel : 렐 속성은 html 파일과 연결할 관계를 알려줌 (연결하는 파일 속성 설명?)
- href : 연결할 위치를 알려주면 됨 (css 파일 경로)

6. CSS Reset

브라우저 마다 기본으로 지정된 CSS가 달라서 문제가 생김
CSS Reset을 통해서 적용되도록 함
다양한 CSS Reset이 존재함
normalize.css : Reset과 다르게 브라우저 끼리 다른 부분만 , 필요한 부분만 재지정 하는 오픈 소스(광범위한html 요소들을 평준화 시킴)
normalize 코드를 복사하여 normalize.css 파일생성뒤 붙여 넣기하여 html에 link 함

7. 사이트 구조

헤더(Header) : 가장 상단, 페이지 마다 반복되는 요소 (Header 태그 사용)
네비게이션 바(Navigation bar) : 다른 페이지로 이동 시 링크버튼 및 검색 부분 존재
main contnet : 본문의 주요 내용을 넣고 , 문서에서 딱한 번만 넣을 수있음 (main 태그 사용)
side bar : 기타정보, 링크 , 광고 등 표시하며 navigation bar 와 유사하게 구성 가능 (aside 태그 사용) , 주로 메인 요소 내에 배치되는 경우가 많음
footer : 주소, 카피라이트, 연락처, 정보, 중요도가 낮음

8. 사이트 구조 분석

1) django 메인 사이트 구조 분석

header (로고, 슬로건, 네비게이션 바)
main (광고부분?, 메인글, 사이드 메뉴)
footer (링크 부분, footer)

2) 사이트 레이아웃 분석(html)

header
main
- div. hero-section
- div. main-content
- div. side-contnet
footer
- div.links
- div. footer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Web framework fo perfectionists with deadlines | Django</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./normalize.css">
</head>
<body>
    <header class="header">헤더</header>    
    <!-- header 라는 태그에 header라는 클래스 이름 -> header.header + tab -->
    <main class="main">
        <div class="hero-section">히어로</div>
        <div class="main-content">메인 콘텐츠</div>
        <div class="side-content">사이드 콘텐츠</div>
    </main>
    <footer class="content-info">
        <div class="links">링크</div>
        <div class="footer">푸터</div>
    </footer>

</body>
</html>

3) 사이트 레이아웃 구체화 (css)

div. main-contnet
- float : left
- width : 70%
div. side-contnet
- float : left
- width : 30%

/* 컨텐트 박스를 보더 박스로 바꾸기 */
/* * : 모든 속성이 선택 됨, 모든 속성과 가상 박스 속성도 보더 박스로 변경 */
*::before,
*::after {
  box-sizing: border-box;
}

/* HEADER */
.header {
  background-color: yellow;
}

/* MAIN */
.main {
  background-color: lime;
}

.hero-section {
  background-color: aqua;
}

.main-content {
  background-color: blue;
  float: left;
  width: 70%;
}

.side-content {
  background-color: pink;
  float: right;
  width: 30%;
}

/* COTENT-INFO */
.content-info {
  background-color: green;
}

.links {
  background-color: lightgreen;
}

.footer {
  background-color: purple;
}

'CSS' 카테고리의 다른 글

20210524 CSS01 : css syntax, html에 연결방식, 선택자(기본, 복합), 가상 클래스 선택자 (0)	2021.05.25
20210120_웹 프론트엔드 기초05 , HTML 및 CSS Reference, 실제 CSS 적용! (0)	2021.01.21
20210119_웹 프론트엔드 기초04 , CSS 선택자 정리 (0)	2021.01.19
20210118_웹 프론트엔드 기초03 , 사이트 분석하여 html 작성 (0)	2021.01.19
20210114_웹 프론트엔드(Web front end) 기초01, HTML, CSS (0)	2021.01.14

라쿤코드의 개발 블로그

20210115_웹 프론트엔드 기초02, CSS영역, Reset, 선택자, 사이트 실습

웹 프론트엔드(web front end) 기초02

1. CSS 박스 모델

1) content 영역

2) paddig 영역

3) border 영역

4) margin 영역

5) box-sizing :

2. normal flow 벗어난 레이아웃

1) float

2) position

3. CSS 선택자(Selector)

1) class 선택자

2) tag 선택자

3) id 선택자

4) 선택자 적용 우선 순위

5) 다중 선택

6) 특정 선택

7) 가상 선택자(조건문 같은 느낌)

8) 가상 요소

9) 구체성 값

10) cascading

4. 환경설정

1) VScode 설치 & 익스텐션

2) Chrome 웹스토어

5. VScode를 활용한 실습

1) 문서 구조

6. CSS Reset

7. 사이트 구조

8. 사이트 구조 분석

1) django 메인 사이트 구조 분석

2) 사이트 레이아웃 분석(html)

3) 사이트 레이아웃 구체화 (css)

'CSS' 카테고리의 다른 글

티스토리툴바

20210115_웹 프론트엔드 기초02, CSS영역, Reset, 선택자, 사이트 실습

웹 프론트엔드(web front end) 기초02

1. CSS 박스 모델

1) content 영역

2) paddig 영역

3) border 영역

4) margin 영역

5) box-sizing :

2. normal flow 벗어난 레이아웃

1) float

2) position

3. CSS 선택자(Selector)

1) class 선택자

2) tag 선택자

3) id 선택자

4) 선택자 적용 우선 순위

5) 다중 선택

6) 특정 선택

7) 가상 선택자(조건문 같은 느낌)

8) 가상 요소

9) 구체성 값

10) cascading

4. 환경설정

1) VScode 설치 & 익스텐션

2) Chrome 웹스토어

5. VScode를 활용한 실습

1) 문서 구조

6. CSS Reset

7. 사이트 구조

8. 사이트 구조 분석

1) django 메인 사이트 구조 분석

2) 사이트 레이아웃 분석(html)

3) 사이트 레이아웃 구체화 (css)

'CSS' 카테고리의 다른 글

'CSS' Related Articles

티스토리툴바