TIL

베이스 캠프 16일차 1, 2주차 TIL 정리

버밀이 2023. 3. 7. 13:30

웹페이지의 구성 언어

1. HTML

핵심 요소

1. Block, Inline

Block : 페이지의 가로 넓이 전체를 차지하는 요소Inline : 자신의 크기만큼만 차지하는 요소

2. 종속 태그

다른 태그와 함께 상호작용을 해야 작동하는 태그를 말한다.

3. HTML 문서구조

최소한의 문서의 구조를 통일시켜놓고 체계화한 것이 HTML이다

2. CSS

특성

웹 브라우저가 읽을 수 있는 언어 중 디자인과 구조를 잡아주는 역할을 하는 언어이다.

CSS의 특성에는 색, 크기, 정렬, 등이 존재한다.

 

사용방법

 

1. html 태그에 직접입력

2. style 태그에 입력하기

3. css 파일과 html 파일을 연결



1. Selector = 선택자로 어떤 HTML 요소를 선택해서 스타일을 적용할 것인지 지정한다.

2. Property = 속성으로 적용하고자 하는 스타일의 종류를 결정

3. Property value = 속성값으로 해당 속성을 정확하게 어떤 값으로 지정할 것인지 결정

4. Declartion = 선언 = Property + Property value 이다.

 

CSS의 작성 방법에는 3가지가 있는데 inline style 작성과 <style> 태그 사용하기 별도의 css 파일 작성 후 연결하는 방식이 있다.

주로 3번째 방법을 사용한다.

// 링크 태그는 head태그 안에 있어야 합니다.
<link href="./style.css" rel="stylesheet" type="text/style" />

css와 html 연결 방법

  • href : 참조할 css파일 경로를 적어줍니다.
  • rel : 해당 파일과의 관계(relation)이며, "stylesheet"라고 적어주시면 됩니다.
  • type : link태그로 연결되는 파일이 무엇인지 알려주며 "text/style" 를 적어주시면 됩니다.


CSS 선택자

1. 태그 선택자
/* 태그 선택자 사용방법 */
태그 {
    property : property value;
}

/* 사용 예시 */
div {
    background-color : red;
}

2. id 선택자(#)

/* id 선택자 사용방법 */
#id {
    property : property value;
}

/* 사용 예시 */
#title {
    font-size : 24px;
}

3. class 선택자(.)

/* class 선택자 사용방법 */
.class {
    property : property value;
}

/* 사용 예시 */
.box {
    border : 2px solid red;
}

4. 자손 선택자

 

/* 자손 선택자 사용방법 - 선택자1 안에 있는 선택자 2를 선택한다. */
선택자1 선택자2 {
    속성 : 속성값
}

/* 자손 선택자 사용예시 - .box 안에 있는 #title을 선택한다. */
.box #title {
    color : red
}

 

5. 다중 선택자

/* 다중 선택자 사용방법 */
선택자1선택자2 {
    속성 : 속성값
}

/* 자손 선택자 사용예시 - .box 이면서 동시에 #title인 요소를 선택한다. */
.box#title {
    color : red
}

 

6. 전체 선택자(*)

*{
   property : property value
}

 

7. 그룹 선택자(여러 선택자를 그룹으로 묶어서 선택할 수 있게 하는 선택자.)

/* 동일한 속성을 반복적으로 사용 */
h2 {
	color : blue;
}
p {
	color : blue;
}
div {
	color : blue;
}

/* 그룹 선택자를 이용해서 한번에 처리 */
h2, p, div {
	color : blue
}

7. 가상 클래스 선택자(:)

특정 이벤트가 발생했을 때 css 변경을 위해 사용됨.

 

선택자 설명
:first-child 첫번째 자식 선택
:last-child 마지막 자식 선택
:nth-child(n) 홀수번째 자식 선택
:hover 마우스를 요소에 올렸을 때 
.some-box:hover{ background-color: red; }
.container-boxs:first-child{ margin-left: 0; }
.container-boxs:last-child{ margin-right: 0; }
.contentsBox:nth-child(n){ color: red; }

1. :first-child

<div class="container">
	<h1>이렇게</h1>
	<p>자식이 있다면?</p> 
</div>

.container h1:first-child{
	background :red
}

2. :first-of-type (형제 요소 중 자신의 유형과 일치하는 제일 첫 요소를 취급합니다.)

<div class="container">
	<h1>이렇게</h1>
	<p>자식이 있다면?</p> 
	<p>이번엔</p> 
	<h2>다른걸</h2>
	<p>해볼거야</p>
</div>

.container p:first-of-type{
	background :red
}

3. :nth-child(n)

<div class="container">
	<p>1번</p>
	<p>2번</p> 
	<p>3번</p> 
	<p>4번</p>
	<p>5번</p>
</div>

.container span:**nth-child(3)**{
	color : red;
}

4. nth-of-type(n)

<div class="container">
	<span>1번</p>
	<p>2번</p> 
	<p>3번</p> 
	<span>4번</span>
	<span>5번</span>
	<p>6번</p>
	<span>7번</span>
</div>

.container p:**nth-of-tpye(3)**{
	color : red;
}

5. :active

활성화 된 요소를 선택하는 가상 클래스 선택자 ex) 버튼 클릭

 

6. :focus

입력창들 중 커서가 있는 입력창을 선택하는 가상 클래스

 

7. :visited

사용자가 방문한 적 있는 링크를 선택 하는가상 클래스 선택자입니다.

 

8. 가상 요소 선택자

:after, :before

 

<!-- 가상요소 선택자 사용시 html-->

<div class="box1">
 나는 박스1입니다.
</div>

.box1{
    width : 200px;
    height: 300px;
    background-color: yellow;
}
.box1:after{
    content:"나는 박스2입니다.";
    display: block;
    background-color: blue;
}

형제 요소 선택자

<div class="container">
	 <p class="text">나는 text입니다.</p>
	 <span>나는 span입니다.</span>
	 <span>나는 span입니다.</span>
	 <p>나는 p입니다.</p>
	 <p>나는 p입니다.</p>
</div>

.text ~ span {
	background : red
}

 

폰트 기본 스타일

속성 설명
font-size 글자 크기 조절
font-weight 글자 굵기 조절
font-style 기울임 여부 조절
text-decoration 글자에 장식용 선을 추가
color 글자 색

 

박스 모델

중요한 점 : HTML 태그는 박스 모델이다!

박스 모델의 구성 요소 그림

명칭 설명
content 요소의 실제 내용이 차지하는 영역
padding 내용과 테두리 사이의 간격, 내부 여백에 해당
border 내용과 패딩을 감싸는 테두리
margin 테두리와 이웃하는 요소 사이의 간격, 외부 여백에 해당
box-sizing 요소의 너비와 높이를 계산하는 방법 지정

box-sizing

box-sizing 속성에는 크게 2 가지 속성이 존재한다.

1. content-box : Content 영역을 기준으로  box의 size를 적용하는 box-sizing 값

그림

2. border-box : Border(경계선) 영역을 기준으로 box의 size를 적용하는 box-sizing 값

그림

inline 요소 vs block 요소

1. block 요소 

위 그림과 같이 부모 요소의 너비를 가득 채우며 블록 요소를 쌓을 경우 자동으로 다음 줄로 넘어간다.

 

2. inline 요소

위 그림과 같이 태그에 할당된 공간 만큼의 너비만을 차지하여 block과 다르게 한 개당 하나의 줄을 차지하지 않는다.

 

정렬

1. Flex : 여러 태그를 하나로 묶어서 정려하는 것이 핵심으로 부모박스를 기준으로 두고 정렬을 한다.

자주 사용되는 flex 속성들

/* 부모박스 */
    display: flex;
    
/* 행기준: row, 열기준: column */
    flex-direction: row;
    flex-direction: column; 
      
/* flex-direction 기준 수평 방향으로 자식박스 정렬 */
    justify-content: center;

/* flex-direction 기준  수직 방향으로 자식박스 정렬 */
    align-items: center;

 

flex의 속성

flex가 적용된 요소는 중심축과 교차축이 생긴다. 이 둘이 정렬의 기준이 된다.

컨테이너에 적용하는 속성

속성 속성 값 설명
display flex flex 레이아웃 정렬 활성화
flex-direction row (기본값) 배치 방향 - 중심축을 가로 방향으로 배치
  column 배치 방향 - 중심축을 세로 방향으로 배치
justify-content(메인축) flex-start (기본값) 메인 축 방향 - 시작점으로 모아 정렬
  flex-end 메인 축 방향 - 종단점으로 모아 정렬
  center 메인 축 방향 - 가운데 정렬
  space-around 메인 축 방향 - 각 자식 객체 좌우에 일정한 간격 설정 (자료 참조)
  space-between 메인 축 방향 - 각 자식 객체 사이에 일정한 간격 설정 (자료 참조)
  space-evenly 메인 축 방향 - 자식 객체를 일정한 간격으로 정렬 (자료 참조)
align-items stretch (기본값) 교차 축 방향 - 컨테이너의 사이즈만큼 늘림 (자료 참조)
  flex-start 교차 축 방향 - 시작점으로 모아 정렬 (자료 참조)
  flex-end 교차 축 방향 - 종단점으로 모아 정렬 (자료 참조)
  center 교차 축 방향 - 가운데 정렬 (자료 참조)

 

flex-wrap

flex-item이 여러개일 때, item들의 줄바꿈을 허용할 것인지 말 것인지 결정한다.

기본값은 flex-wrap : nowrap으로 줄바꿈을 허용하지 않는다.flex-wrap : wrap으로 줄바꿈 허용중요~!? align-items는 flex-items이 한 줄일 때 우선 적용!!
item이 두 줄 이상인 상태에서 정렬을 원하시면,
align-content라는 속성을 이용해주시면 됩니다. 

 

flex-item 속성들

속성값 설명
order item의 순서 지정
flex-basis item의 기본 사이즈 지정
flex-shrink 설정된 값(숫자)에 따라 flex-container 요소 내부에서 flex-item 요소의 크기 축소
flex-grow flex-item 요소가 flex-container 요소 내부에서 할당 가능한 공간 비율 선언

 

 

2. position : flex에 종속되지 않고, 독자적으로 위치 정보를 입력하여 위치시키는 방법

/* 박스의 절대 위치 */
div {
    position: absolute;
    top: 0px;
    left: 0px;
}

/* 부모 박스 기준으로 상대위치 */
div {
    position: relative;
    top: 0px;
    left: 0px;
}

/* 화면을 기준으로한 절대 위치 */
div {
    position: fixed;
    bottom: 0px;
}

CSS 상속

 

기본적으로 css는 부모 요소에 지정한 속성값을 자식 요소에게도 상속해서 적용합니다.
어떻게 상속이 되는지는 아래 예시를 통해 알아보도록 하겠습니다.

 

예시

<div class="container">
	바깥에 있는 박스입니다.
	<div class="inner-box">
		<p>안쪽에 있는 박스입니다.</p>
	</div>
</div>

.container{
	color : red
}

상속되는 속성 : color, font-family, font-size......

상속되지 않는 속성 : padding, margin, border......

위 속성들을 외울 필요는 없다.

 

CSS 상속의 우선순위 - Cascading이라는 규칙으로 결정한다.

캐스케이딩은 폭포, 위에서 아래로 흐르는 이라는 의미를 가지고 있으며 한 요소가 여러가지 속성값을 상속 받을 경우 이를 통해서 우선 순위를 정한다.

 

캐스케이딩의 기준 3가지

 

1. 중요도css가 선언된 위치에 따라 중요도를 나눈다.브라우저 스타일 시트 < 사용자 스타일시트 < 개발자 스타일 시트-> 개발자 스타일 시트의 중요도
-> 개발자 스타일 시트 안에서도 중요도 순위가 나뉩니다.
<link>로 연결한 css파일< <style>요소 안에** 있는 CSS < 인라인 스타일 CSS

 

중요도 우선순위 정리

  1. 인라인 스타일 CSS
  2. <style> 요소 안에 있는 CSS
  3. <link>로 연결한 CSS 파일
  4. 사용자 스타일 시트
  5. 브라우저 스타일 시트

2. 구체성(명시도)

선택할 대상을 구체적으로 특정할수록 명시도가 높아집니다.

부모에게 상속받은 속성 < 전체 선택자 < 태그 선택자 < 클래스 선택자, 가상 선택자 < ID 선택자

 

예시

<div class="text-class" id="text-id">
	텍스트 입니다.
</div>

* {
	color: red;
}
div {
	color: yellow;
}
.text-class {
	color : blue;
}
#text-id {
	color :violet;
}

예시 결과

3. 선언 순서

css에 밑에 입력된 것이 가장 우선된다,

 

예시

<div class="text-class" id="text-id">
	텍스트 입니다.
</div>

#text-id {
	color :violet;
}
#text-id {
	color :red;
}
#text-id {
	color :green;
}
#text-id {
	color :blue;
}

예시 결과

 

단위

1. 절대 단위

px(화소), pt(포인트) 등

 

2. 상대 단위

%, em(자신의 font 사이즈 기준), rem(최상위 font 사이즈 기준)

 

배경

배경의 다양한 속성들

background-color

요소의 배경에 색상을 지정합니다.

background-color: #f12db0 | rgb(122,122,123)

background-image

요소의 배경 이미지를 한 개, 혹은 여러개 지정합니다.

background-image: url("이미지 경로")

(이미지는 중첩 가능)

 

background-position

요소의 배경 이미지의 위치를 지정합니다.

/* 다섯가지 키워드를 조합해서 위치를 지정합니다 */
background-position: center;
background-position: top right;
background-position: left;
background-position: bottom center;

/* x축과 y축 수치 직접입력 */
background-position: 50px 24px; (각각 x축 y축)

background-repeat

요소의 배경 이미지의 반복 여부와 반복 방향을 지정합니다.

background-repeat: no-repeat | repeat | repeat-x | repeat-y

background-size

요소의 배경 이미지의 크기를 지정합니다.

background-size: cover | auto | contain 

/* 직접 픽셀을 정해줄 수도 있습니다. */
background-size: 200px 120px

background-attachment

요소의 배경 이미지의 스크롤 여부를 지정합니다.

background-attachment: fixed | scroll(기본값) | local

background 단축 속성

/* background : color imageUrl repeat position/size attachment */
background : red url("이미지 경로") no-repeat center/cover fixed

object-fit

<img> 나 <video> 등 대체요소의 내용이 지정된 규격과 맞춰지는 방식을 지정합니다.

/* 네개 중 하나를 선택해서 사용합니다. */
object-fit : cover / fill(기본값) / contain / none

object-position

<img> 나 <video> 등 대체요소의 콘텐츠 정렬 방식을 지정합니다.

 

object-position : 100px 40px

 

상대 단위 - vw / vh

viewport를 기준으로 너비(vw), 높이(vh)를 정하는 상대 단위. 반응형 웹사이트 개발에 주로 사용된다.

viewport 란?
-> 화면 display상의 표시 영역을 뜻합니다.

/* viewport가 1200(px)x920(px)인 경우 */

10vw => 1200x0.1 = 120px
50vh => 920x0.5 = 460px
100px => 1200x1 = 1200px

CSS에서의 함수

calc() : 괄호 안의 사칙연산을 수행한 결과를 속성값으로 사용할 수 있습니다.

덧셈, 뺄셈

.item1{
	background: red;
	width: calc(50px + 50px);
	height: 50px;
}
.item2{
	background: blue;
	width: calc(100% - 120px);
	height: 50px;
}

곱셈, 나눗셈

.item3{
	background: green;
	width: calc(2*100px);
	height: 50px;
}
.item4{
	background: orange;
	width: calc(100%/4);
	height: 50px;
}

Position

position이란 HTML 요소가 배치되는 방식을 결정하는 속성입니다. 또한 다섯 가지 속성이 존재합니다.

1.static(기본값) : 문서상 원래 있어야 하는 위치에 배치됩니다.

2.relative : 원래 있던 자리를 기준 으로 요소의 위치를 조정할 수 있습니다.

3.absolute : 절대 좌표를 기준 으로 요소의 위치를 조정할 수 있습니다. relative가 적용 된 요소 를 찾아서 절대 좌표의 기준으로.

4.fixed : viewport를 기준 으로 요소의 위치를 조정할 수 있습니다.

5.sticky : 부모 요소의 좌표 기준 으로 요소의 위치를 조정할 수 있습니다.

 

z-index

여러개의 겹치는 태그들의 우선 순위를 정하는 값.

예시

z-index: auto (기본값)
z-index: 1
z-index: 9990

transition

css 속성을 이용한 변화의 전, 후 사이에 애니메이션을 추가해서 움직임을 부드럽게 만들어 줄 수 있습니다.

 

사용 예시

transition-property: color,trasform
transition-duration: 0.2s

 

transition-timing-function(transition의 속도 패턴 정의)의 속성 값들

 

속성값 설명
ease-in-out 천천히 시작 => 정상 속도 => 빠르게 종료
linear 일정한 속도로 변화
ease 시작 시 점점 빠르게 => 느려지며 종료
ease-in 천천히 시작 => 속도를 높여 종료
ease-out 빠르게 시작 => 천천히 종료

transition 단축

Transform

이동, 회전, 확대, 축소 비틀기 등의 변형 효과를 주는 명령어로 transform의 속성값은 아래의 표와 같다

속성값 설명
translate(x,y), translateX(x), translateY(y) x,y 혹은 x나 y 만큼 이동시킨다.
scale(x,y) scaleX(x) scaleY(y)  x,y축을 기준으로 입력된 x, y의 비율만큼 크기를 조정한다.
skew(x, y), skewX(x), skewY(y) x,y축을 기준으로 입력된 x, y 각도 만큼 기울이기가 가능해진다.
rotate(n) n만큼 회전이 가능하다.

transform 중첩적용

transfrom은 여러가지 변환 함수를 중첩해서 속성값으로 줄 수도 있습니다.

tansform : rotate(75deg) translateY(120px)

transfrom + transition = 간단한 애니메이션 효과 가능

 

animation

animation을 만들기 위해서는 keyframe이라는 명령어를 사용해야하는데 keyframe은 CSS 애니메이션 의 시작, 중간, 끝 등의 중간 상태를 정의한다.

 

ex)

/* keyframe 작성 방법 */
@keyframes 애니메이션이름 {
	from {
		left : 0;
	}
	to{
		left : 200px;
	}
}
/* keyframe 작성 방법 */
@keyframes 애니메이션이름{
	0% {
		left : 0;
	}
	50%{
		left : 200px;
	}
	100%{
		top : 200px;
		left :  200px;
	}
}

animation 관련 속성

 

animation-name

어떠한 keyframes를 요소에 적용할 것인지 지정합니다.

animation-name: moveRight



animation-duration

애니메이션을 한 번 재생하는데 걸리는 시간을 설정합니다.

animation-duration: 2s



animation-direction

애니메이션 재생 방향을 정의 합니다. (정방향/역방향)

animation-direction: alternate | normal | reverse | alternate-reverse
  • normal : 정방향으로 재생합니다.
  • reverse : 역방향으로 재생합니다.
  • alternate : 정방향으로 재생합니다. (단, 정방향/역방향을 번갈아 재생합니다.)
  • alternate-reverse : 역방향으로 재생합니다. (단, 역방향/정방향을 번갈아 재생합니다.)



animation-iteration-count

애니메이션 재생 횟수를 정의합니다.

animation-iteration-count : infinite | 3



animation-timing-function

애니메이션 재생 패턴을 정의하며, transition-timing-function과 유사합니다.

animation-timing-function : ease-in-out

animation-timing-function/transition-timing-function에 대한 재생 패턴은 링크를 참고해주세요!



animation-delay

애니메이션 시작을 얼마나 지연할 지 설정합니다.

animation-delay : 2s

animation 단축속성

애니메이션 카테고리에 속한 속성들도 단축 속성으로 모아서 지정 해줄 수 있습니다.
만일 순서가 바뀔 경우 , 오류가 발생 하거나 의도와 다른 결과가 도출 될 수 있으니 단축 속성을 사용하실 때는 순서에 유의하시길 바랍니다.

GRID 레이아웃

rid는 2차원적인 구조 를 가지고 있으며 row와 column을 이용해서 위치를 정하는 형식이다.

 

Grid의 속성들

명칭 설명
grid-container grid 레이아웃이 적용된 요소
grid-item grid-container의 자식 요소
grid-line grid-item 사이의 경계
grid-number 몇번째 grid-line인지 구분

Grid-template

grid의 행&열의 개수 및 크기를 지정할 수 있습니다.

grid-template-rows : 1fr 2fr 200px
grid-template-columns : 1fr 2fr 200px

 

 단위 fr은 fraction(분수)의 약자로 비율로 나타내는데 쓰인다. ex) 1fr , 2fr, 3fr, 2fr = 1+2+3+2 = 8등분을 1:2:3:2 비율로 나눔.

 

repeat()

grid-template에는 repeat() 이라는 반복 함수도 써줄 수 있습니다.
repeat(a, b)라고 입력하면, b규격의 grid-template을 a개 생성한다는 의미가 됩니다.

grid-template-columns: repeat(4, 1fr);
grid-template-columns: 1fr 1fr 1fr 1fr;

grid-column & grid-row

grid-column 과 grid-row 는 grid-item에 줄 수 있는 속성입니다.
각각의 grid-item이 열과 행 방향으로 얼마만큼의 영역을 차지할 지 정의합니다.
이 때, 그 값에는 시작점이 되는 grid-number와 종료지점이 되는 grid-number를 입력합니다,

grid-column: 1 / 4;
grid-row: 2 / 3;

 

 

 

반응형 웹

반응형 웹이란, 다양한 디바이스에서 접속했을 때
기기의 Viewport 규격에 반응하여 레이아웃이 자동으로 변경되는 웹페이지 를 뜻합니다.

 

미디어 쿼리

미디어 쿼리란 Viewport의 너비에 따라 웹사이트의 스타일 시트를 수정할 수 있게 해주는 CSS의 기능입니다.
이 때, 뷰포트 너비 이외에도 단말기의 종류, 해상도 등을 기준으로 설정할 수 있습니다.

기본 형태

미디어 쿼리의 기본 형태는 다음과 같습니다.

@media screen and (max-width: 500px) {
	/* 스크린의 너비가 500px 이하일 경우 적용시킬 스타일 시트를 적습니다. */
}

위 내용을 해석하면 아래와 같습니다.

명령어 설명
@media 미디어 쿼리 기능을 활성화
screen 디지털 화면(screen)에 노출되었을 때 중괄호 안의 속성을 적용
max-width: 500px viewport 너비가 500px 이하일 경우 중괄호 안의 속성을 적용
and 미디어 쿼리 조건 연결 (and로 연결한 모든 조건을 만족할 경우 중괄호 안의 속성을 적용)

한글로 풀어서 적어보면
미디어 쿼리 기능을 이용하여 viewport 너비가 500px 이하인 디지털 화면(screen)일 경우 중괄호 안의 속성을 적용 하는 것입니다.

 

 

breakPoint란?

breakPoint란 반응형 웹페이지의 작업 기준이 되는 중단점을 의미합니다.
간단하게 말해서, PC / Tablet / Mobile의 기준이 되는 규격 분기입니다.
가장 일반적으로 사용되는 breakPoint 분기는 다음과 같습니다.

크기 범위
Mobile 0 ~ 767px
Tablet 768px ~ 1923px
PC 1024px ~ 1439px
PC Large 1440px ~

 

반응형 웹에 자주 쓰이는 속성

max-width / max-height

요소의 최대 크기를 지정하는 속성입니다.
max-width을 사용하면 가로 규격을, max-height를 사용하면 세로 규격을 한정할 수 있습니다.
사용 방법은 다음과 같습니다.

max-width : 1240px;
max-height : 100vh;

min-width / min-height

요소의 최소 크기를 지정하는 속성입니다.
min-width을 사용하면 가로 규격을, min-height를 사용하면 세로 규격을 한정할 수 있습니다.
사용 방법은 다음과 같습니다.

min-width : 720px;
min-height : 30%;

max()

소괄호 안에 입력된 값 중 제일 높은 값을 속성값으로 출력하는 함수입니다.
소괄호 안에는 여러 개의 값을 콤마로 연결해 입력해줄 수 있습니다.
사용 방법은 다음과 같습니다.

height : max(320px, 20%)

min()

소괄호 안에 입력된 값 중 제일 낮은 값을 속성값으로 출력하는 함수입니다.
소괄호 안에는 여러 개의 값을 콤마로 연결해 입력해줄 수 있습니다.
사용 방법은 다음과 같습니다.

width : min(1240px, 100%)

 

앞으로의 목표

반응형 웹을 비롯한 css를 활용한 기술에 대한 이해도를 높이고 많은 상황에서 적절히 적용할 수 있도록 완벽히 제 기술로 만드는 것이 목표입니다. 그리고 더 많고 다양해지는 css 및 프론트 엔드 언어를 배워 꼭 취직하고 싶습니다.