AS 4 | HTML/CSS - 자주쓰이는 내용
HTML
- 박스모델로 생각하는 것 중요
박스모델로 나누면 좋은점
- 박스별로 분류 하기가 좋다.
태그의 종류
박스
header, nav, aside, main, footer
main→ section → article
div, span, form
아이템
a, button, input, label, img, video
audio, map, canvas, table
사용자에게 보여지는 아이템들
block 레벨의 element
충분한 공간이 있어도 다음줄로, 한줄에 하나
inline 레벨의 element
공간이 허용하면 다른 태그 옆에 배치 가능
Box vs Item
a
<a href="주소" target=_blank>Click</a>
Block vs Inline
<p>
태그 - 문단을 작성
Inline 레벨 - <b>
<span></span>
Block 레벨 - <div></div>
ol, ul, li
ol>li*n 입력하면 원하는 개수만큼의 li 자동으로 입력
list 타입 설정해줄수 있음
input and type
보통 label과 같이 사용
id를 줘서 고유한 식별값을 부여
둘다 inline element
CSS
Cascading Style Sheet
의미, 정의
! important - 가장 우선되는 순위 (가능하면 쓰지 않는게 좋음)
Author Style
User Style
Browser
선택자(selectors)
- Universal -
*
- type -
Tag
- ID -
#id
- Class -
.class
- State -
:
- Attribute -
[ ]
스타일링
- margin
- padding
- border
CSS 레이아웃 정리(display, position)
Display
- block - 한줄에 한개의 상자
- inline-block - 한줄에 여러개 블럭 단위로 컨텐츠 사이즈 상관없이
- inline -컨텐츠 자체만을 꾸며준다. 안에 있는 값만
Position
- static - 기본값, HTML에 정의된 순서대로 브라우저에 자연스럽게 보이는것
- relative - 원래 있어야되는 자리에서 준 값만큼 이동
- absolute - 내 아이템이 담겨있는 상자안을 기준으로 준 값만큼 이동
- fixed - 상자 안에서 완전히 벗어나서 윈도우 기준으로 준 값만큼 이동
- sticky - 원래 있어야 하는 자리에 있고, 스크롤링 되어도 그자리에 붙어있는것
Flexbox
float
float
left, center, right
container
display : flex
- flexbox라고 선언? 하는방법flex-direction
- box 방향flex-wrap
- 기본값 nowrap - 무조건 한줄안에, wrap - 한줄이 꽉차면 다음줄로 바뀜flex-flow
- direction과 wrap을 한번에 묶은것justify-content
- 중심축에서 아이템들을 어떻게 배치할지. 기본값 flex-start, flex-end : 오른쪽으로 붙여서, center : 가운데, space-around : 같은 간격으로 띄어서align-items
- 반대축에서 아이템들을 어떻게 배치할지, baseline : 아이템크기와 상관없이 텍스트를 같은 줄로 맞추는방법align-content
- 반대축의 아이템들을 어떻게 배치할지, space-between 양쪽끝은 딱붙이고 사이에 간격
container 안에 있는 item
order
- order: 기본값0, order을 이용해서 item들의 순서를 변경, 잘 사용Xflex-grow
-기본값0일때는 변화가 없지만 값을 주면 container를 채우려고 늘어난다. 주어진 값에 따라상대적인 비율flex-shrink
- container가 점점 작아질때 줄어드는 비율. flex-grow의 반대.flex-basis
- 아이템들이 공간을 어떻게 차지해야하는지 더 자세하게 세부적으로 정해줌. 기본값 autoalign-self
- container에 지정된걸 벗어나서 특정 item의 위치만 변경해주고 싶을때
main axis(중심축) & cross axis(중심축의 반대축)
100% vs 100vh(viewport height)
100%
- 부모의 100%100vh
- 부모에 상관없이 보이는 viewport의 %로
Author And Source
이 문제에 관하여(AS 4 | HTML/CSS - 자주쓰이는 내용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@4_21ee/AS-4-HTMLCSS-자주쓰이는-내용저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)