![[패스트캠퍼스] 프론트엔드 강의 2주차 학습일지!](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FnxgvU%2FbtrTth1ePDM%2FAAAAAAAAAAAAAAAAAAAAAFlqWq1hjg6PewmqLQHris_A7AQ3td3b0rKPVYnFwYSK%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1780239599%26allow_ip%3D%26allow_referer%3D%26signature%3D%252B0zIkLaZwiTmMvPvdK0MeT8Bs1M%253D)
본 게시글의 저작권은 패스트 캠퍼스에 있으며,국비 지원 교육을 통해 패스트캠퍼스 강의를 수강후
작성되는 게시글입니다.
리뷰 전 후기
이번 주차는 css의 전반적인 흐름을 이해한뒤 속성 하나 하나 자세히 알아볼수 있는 시간이였다.
전체적인 흐름은 알고 있었으나 기본적인 것들에 대해 미흡한 점을 보강 할 수 있었고,
혼자 공부했다면 그냥 넘어 갈 수 있는 부분까지 세세히 알려주셔서 다시한번 복습 할수 있는 기회가 되서
너무 좋았다. 패스트 캠퍼스 강의 를 들으며 기본을 다시한번 다지고 react를 제대로 배울수 있을것 같아 기대된다.
글자와 상자
- 요소가 출력되는 특성은 2가지로 구분된다.
- 인라인(inline) 요소 : 글자를 만들기 위한 요소들
- 블록(block) 요소 : 상자(레이아웃)를 만들기 위한 요소들
인라인 요소
- 수평적으로 쌓인다.
- 포함한 콘텐츠 크기만큼만 가로와 세로 영역을 차지한다.
- 즉 width와 height를 지정해주어도 반응하지 않는다
- 좌우 여백은 조절이 가능하지만 상하의 좌우는 적용되지 않는다!
- 자식 으로 block요소를 사용할수 없다!!
span
- 본질적으로는 아무것도 의미하지않는다.
- 콘텐츠 영역을 설정하는 용도!
블록 요소
- 요소가 수직으로 쌓인다.
- 부모 요소의 크기만큼 자동으로 늘어난다.
- 가로와 세로의 너비를 지정 할 수 있고 상하좌우 여백역시 지정할수 있다!!
- 블록 요소는 자식으로 블록 요소와 인라인 요소 모두를 가질수 있다.
핵심 요소
div
- Division의 약어로 대표적인 블록 요소이다.
- 구분을 위해 사용한다!
- 블록 요소!
h1
- Heading의 약어로 제목을 의미하는 요소이다.
- 뒤의 숫자가 작을수록 더 중요한 제목을 정의한다. 크기와 작을수록 커진다!
- 블록 요소!
p
- Paragraph의 약어로 문장을 구분하는 요소이다.
- div로 대체 할 수 있다!
- 블록 요소!
img
- Image의 약어로이미지를 삽입하는 요소이다.
- src는 이미지의 경로 이며 alt는 이미지가 삽입되지 않알을 때 보시할 이미지의 이름!
- 인라인요소!
ul
- Unordered List의 약어로 순서가 필요없는 목록의 집합을 의미한다.
- src는 이미지의 경로 이며 alt는 이미지가 삽입되지 않알을 때 보시할 이미지의 이름!
- 블록 요소!
li
- list item 약어로 목록 내 각 '항목'을 의미한다.
- src는 이미지의 경로 이며 alt는 이미지가 삽입되지 않알을 때 보시할 이미지의 이름!
- 블록 요소!
a
- Anchor의 약어로 하이퍼링크를 지정하는 요소이다!.
- href에는 링크 url 즉 경로를 기입하며 target 에는 링크 url이 열릴 위치를 지정할수 있다!
- 예시로 target='_black' 라면 새탭에서 열수 있다!
- 인라인요소!
span
- 특별한 의미가 없는 구분을 위한 요소!
- 인라인 요소!
br/
- break의 약어로써 줄바꿈을 시켜주는 요소이다!
- 인라인 요소!
input
- 사용자가 데이터를 입력하는 요소이다!
- type을 지정할수 있으며 text, password 등등 여러가지가 있다!
- value 값을 사용하여 미리 데이터를 넣어줄수 있다.
- placeholder는 사용자가 입력할 값의 '힌트'를 넣어줄수 있다. 사용자가 값을 입력하면 사라진다!
- 인라인 요소 이면서 블록 요소! 즉 inline-block요소 이다!
- disabled를 기입하면 입력요소를 비활성화 시킬수 있다.
- checkbox 는 사용자에게 체크 여부를 입력받을수 있다. 중복선택가능!
- radio는 목록중 하나만 선택가능하다!
codePen으로 핵심 요소 출력을 연습해보자!
먼저 html요소를 가지고 무언가를 강조하려고 하지말자!
그 점은 css를 가지고 충분히 가능하다!
See the Pen Untitled by jihoon (@Odin_dev) on CodePen.
특정글자만 강조해보자!
See the Pen Untitled by jihoon (@Odin_dev) on CodePen.
여러가지 input연습!
See the Pen Untitled by jihoon (@Odin_dev) on CodePen.
전역 속성?
- 전체 영역에서 모두 사용할수 있는 속성!
title
- 요소의 정보나 설명을 지정할수 있다!
style
- 요소에 적용할 스타일(css)을 지정!
class
- 요소를 지칭하는 중복 가능한 이름!
id
- 요소를 지칭하지만 고유한 이름을 의미한다! 중복x
data-이름!
- 요소의 데이터를 지정하는 속성!
- 기본적으로 문자를 기입한다.
- 표기법에 대해서는 추후 공부할것!!
See the Pen Untitled by jihoon (@Odin_dev) on CodePen.
css의 기본문법!
- 태그를 지정시 div
- class를 지정시 .div
- id를 지정시 #div로 사용한다!
실제 코드방식으로는!!
link 방식!
- 병렬로 연결된 방식!
- 하나씩이 아니라 한번에 가져와 동시에 해석이 진행된다!
import 방식!
- 직렬로 연결된 방식이다!
- 장점이자 단점은 링크로 연결된 파일의 해석이 완료된 다음에 import파일이 연결된다는 점!
- 선행 파일의 해석이 길어질수록 시간이 지연된다.
직렬의 형태로 연결한 예시!
css선택자!
- 기본, 복합, 가상클래스, 가상 요소, 속성
기본선택자
- 태그 선택자, 클래스 선택자, 아이디선택자
복합 선택자_일치 선택자
- 기본 선택자를 복합으로 선택하는 선택자를 의미한다.
- 태그 선택자를 반드시 앞에오도록 한다!
복합 선택자_자식 선택자
- 선택자 ABC의 자식요소 를 선택하는 방법!
- > 기호를 사용하여 선택한다!
복합 선택자_하위(후손) 선택자
- 선택자 ABC의 하위 요소 를 선택하는 방식!
- 띄어쓰기가 선택자의 기호!
- 자식선택자의 확장이라고 생각하면된다.
복합 선택자_인접 형제 선택자
- 같은 부모요소 바로 뒤에오는 형제 요소 하나를 의미한다.
- + 기호를 사용한다.
복합 선택자_일반 형제 선택자
- 같은 부모요소 바로 뒤에오는 형제 요소 모두를 의미한다.
- ~ 기호를 사용한다!
가상 클래스 선택자
- 동작을 제어할수 있는 선택자
- 기본적으로 선택자 뒤 : 기호를 사용하여 사용한다.
- 가장 대표적인 예시
- 어떤 요소에 마우스 커서가 올라가 있는 동안 선택 선택자:hover
- 선택자 요소에 마우스를 클릭하고 있는 동안 선택 선택자:active
- 요소가 포커스가 되면 선택(input 요소등등) 선택자:focus
See the Pen Untitled by jihoon (@Odin_dev) on CodePen.
가상 클래스 선택자2
- div span:first-child 즉 div태그의 하위요소중 첫 번째 자식이 span이라면 선택한다.
- 만약 두번째 예시처럼 첫번째 형제요소인 div가 존재하지 않는다면 아무것도 선택되지 않는다!
- 선택자:first-child!
가상 클래스 선택자2_1
- 선택자 형제 요소중 (n)번째 를 선택!
- 만약 (2n)을 넣는다면 2의 배수를 모두 선택! * n은 0부터 카운트한다! *
가상 클래스 선택자2_2
- 부정선택자 - 선택자:not(요소)
- 선택자를 제외한 나머지 요소를 선택
가상요소 선택자
- 선택자 요소의 내부 앞에 내용을 삽입! 반대는 ::after를 사용한다!
- 선택자::before(:: 두개!)
- 넣을 값이 없더라도 content:""를 반드시 기입!
See the Pen Untitled by jihoon (@Odin_dev) on CodePen.
속성 선택자
- 속성을 포함한 요소를 선택
- 대괄호를 사용하여 속성을 지정한다!
- type 속성을 포함하고 그 속성의 값이 password인 요소를 선택!
스타일 상속
- 해당하는 요소의 하위요소에게 css속성이 상속되는것을 의미한다.
- 속성이 되지않는 것들은 강제 상속을 통해 상속시켜줄수 있으며 inherit(상속) 값을 통해 일치 시킬수 있다.
See the Pen Untitled by jihoon (@Odin_dev) on CodePen.
선택자 우선순위
- 우선 순위란, 같은 요소가 여러번 선언됐을 경우 어떤 css속성을 우선 적용할지 결정하는 방법이다!
- 점수가 높은 선언이 우선이며, 점수가 같으면 마지막에 해석된 선언이 우선된다!
css속성!
width 와 height
- 요소의 가로와 세로 너비!
- 기본값으로 auto가 지정되어 있으며, px,em,vw 등의 단위로 지정할수 있다.
- 속성 앞 max-, min- 을 사용하여 요소에 최대와 최소 너비/높이를 지정해 둘수 있다!
See the Pen Untitled by jihoon (@Odin_dev) on CodePen.
표현 단위!
- px : 픽셀
- % : 상대적 백분율
- em : 요소의 글꼴 크기, 기본 값은 1em이다. (상대적)
- rem : 루트 요소(html)의 글꼴 크기, 즉 최상위 요소의 글꼴 크기를 기준으로 한다! (상대적)
- vw : 뷰포트 가로 너비의 백분율 (상대적)
- vh 뷰포트 세로 너비의 백분율. (상대적)
width 와 height
- 요소의 가로와 세로 너비!
- 기본값으로 auto가 지정되어 있으며, px,em,vw 등의 단위로 지정할수 있다.
See the Pen Untitled by jihoon (@Odin_dev) on CodePen.
margin
- 요소의 외부 여백을 지정하는 단축 속성
- 기본값은 0으로 지정 되어 있으며, auto값은 브라우저가 여백을 계산해 중앙 정렬할수 있다.
- px, em, vw등 단위로 지정! %를 사용하면 부모요소의 가로 너비에 대한 비율로 지정된다
padding
- 요소의 내부 여백을 지정하는 단축 속성
- 기본 값과 단위는 margin과 동일하다!
See the Pen Untitled by jihoon (@Odin_dev) on CodePen.
border
- 요소의 테두리 선을 지정하는 속성
- 두께, 종류, 컬러 순으로 작성한다.
- 두께만큼 요소의 크기가 커진다.!
- border-radius 속성을 통하여 border값에 둥글기를 줄수 있다.!
See the Pen Untitled by jihoon (@Odin_dev) on CodePen.
box-sizing
- 요소의 크기 계산 기준을 지정하는 속성이다.
See the Pen Untitled by jihoon (@Odin_dev) on CodePen.
overflow
- 요소의 크기 이상의 내용이 있을때 그값의 보여짐을 제어하는 속성!
- overflow를 사용하여 제어하며 , -x, -y추가 속성을 사용하여 개별제어가 가능하다!
See the Pen Untitled by jihoon (@Odin_dev) on CodePen.
display
- 요소의 화면 출력 특성을 제어하는 속성이다.
- 여러 태그들의 기본값을 변경해서 사용할수 있다!
- ex) inline 요소들을 display: block 으로 변경해서 가로/세로 길이를 변경해줄수 있다!
투명도
- 요소의 투명도를 조절하는 속성이다.
- 0~1 사이의 값을 사용하여 조절할수 있다!
글꼴
- 기울기와 행간 기본값은 nomal, 두께는 400(normal), 크기는 16px이 기본값으로 지정되어있다.
- 글꼴의 구조는 font-family:글꼴1,"글꼴2",...글꼴계열; 이며 계열은 필수로 작성해주어야 한다.
See the Pen Untitled by jihoon (@Odin_dev) on CodePen.
'React& Redux : [패스트캠퍼스] 프론트엔드 강의' 카테고리의 다른 글
| 패스트캠퍼스 6주차 (0) | 2023.01.11 |
|---|---|
| [패스트캠퍼스] 프론트엔드 강의 5주차 학습일지! (0) | 2023.01.03 |
| [패스트캠퍼스] 프론트엔드 강의 4주차 학습일지! (2) | 2022.12.27 |
| [패스트캠퍼스] 프론트엔드 강의 3주차 학습일지! (0) | 2022.12.14 |
| [패스트캠퍼스] 프론트엔드 강의 1주차 학습일지! (0) | 2022.12.01 |