[엘리스 AI 트랙 2기] 3주-HTML/CSS(07/05)

자료의 출처는 '엘리스 AI 트랙 2기 (https://aitrack.elice.io/)' 'HTML/CSS' 강의이며, 학습 후 정리한 내용입니다.

⚡️올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다.⚡️

1. 웹사이트의 정보와 디자인

01. 웹을 구성하는 요소

프로그래밍이란?

컴퓨터와 소통하는 방법을 의미
컴퓨터에게 전달하는 정보를 어떻게 보여주고 제어할지 결정 가능
웹 개발을 하기 위한 언어로 브라우저와 소통

웹 사이트 제작시 고려 사항

1.웹표준

웹 사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격

2.웹접근성

장애의 여부와 상관 없이 모두가 웹사이트를 이용할 수 있게 하는 방식

3. 크로스 브라우징

모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는 기

02. HTML 기본 태그

HTML 이란?

Hyper Text Markup Language

웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<title>웹프로그래밍</title> 
</head>
<body>
</body>
</html>

<!DOCTYPE html>
HTML5라는 신조어로 문서를 선언하는 태그
<html> ... </html>
HTML 문서의 시작과 끝을 의미
모든 HTML 태그들은 <html> 태그 안쪽에 입력
<head> ... </head>
웹사이트의 간단한 요약 정보를 담는 영역 웹사이트에서 노출되지 않는 정보
<body> ... </body>
웹사이트에서 눈에 보이는 정보를 담는 영역 이미지나 텍스트처럼 출력되는 정보
<meta charset="UTF-8">
character setting의 약자를 나타내는 문자 코드 모든 문자를 웹 브라우저에서 깨짐 없이 표시하겠다는 의미
<title> ... </title>
웹사이트 탭에 나타나는 제목을 적는 태그

04. HTML 태그의 두 가지 성격

Block 요소와 Inline 요소

두 요소를 구분 짓는 세 가지 주요 특징 :

줄바꿈 현상, 가로·세로, 상·하 배치

Block 요소

p, h tag 이외에도 공간을 만들 수 있는 태그(head, body, main, footer 등)또한 block 요소

y축 정렬 형태로 출력 (줄바꿈 현상 나타남)

공간을 만들 수 있고, 상하 배치 작업 가능

Inline 요소

x축 정렬 형태로 출력(한줄에출력)

공간을 만들 수 없고, 상하 배치 작업 불가능

05. CSS

Cascading Style Sheet

정보(HTML)와 디자인(CSS)의 분리
문서의 레이아웃과 스타일 정의
HTML로 작성된 정보를 꾸며주는 언어

CSS 구성 요소

 선택자 { 속성 : 속성값; }

• 선택자
디자인을 적용할 HTML 영역

• 속성
어떤 디자인을 적용할지 정의

• 속성값
어떤 역할을 수행할지 구체적으로 명령. 세미콜론(;) 필수 입력.

CSS 연동 방법 세가지

Inline Style Sheet : 태그 안에 직접 원하는 스타일을 적용

Internal Style Sheet : <style> 태그 안에 넣기

External Style Sheet : <link> 태그로 불러오기

08. 캐스케이딩

CSS의 우선순위 결정 세가지 요소

순서에 의한 케스케이딩: 나중에 적용한 속성값의 우선순위가 높음

디테일에 의한 케스케이딩: 더 구체적으로 작성된 선택자의 우선순위가 높음

선택자에 의한 케스케이딩: style > id > class> type 순으로 우선순위가 높음

2. 웹사이트 레이아웃에 영향을 미치는 요소

01. 박스모델

참고: https://nyol.tistory.com/23?category=963213

CSS: Box Model -1

자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다. ⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️ THE BOX..

nyol.tistory.com

참고: https://nyol.tistory.com/24?category=963213

CSS: Box Model -2

자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다. ⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️ CHANGING..

nyol.tistory.com

02. Block 요소와 Inline 요소

Block 요소의 특징

<p> 태그가 대표적
줄바꿈 현상이 나타남
width / height 값 사용 가능→공간 만들기 가능
margin과 padding 값 사용 가능→상하 배치 작업 가능

Inline 요소의 특징

<a>, <span> 등
줄바꿈 현상 없음
width / height 값 적용 불가
margin / padding 의 top / bottom 값 적용 불가
-> 상하 배치를 할 수 없기 때문 (left, right 사용 가능)

03. 마진 병합 현상

형제지간 마진병합

margin-bottom과 bottom-top 중 숫자가큰값으로적용

부모 자식간의 마진 병합

자식인 <article> 뿐만 아니라 부모인 <main>에도 영향을 미침

-> 자식이 margin-top을 적용하는 순간 부모도 같이 내려가게됨.

이를 방지하기 위해 position: absolute 사용(추후 배울 예정 아님 css 문서 찾아보시길)

04. 레이아웃에 영향을 미치는 속성

display

Block과 Inline 요소의 성격을 바꿀 때 사용

inline-block을 사용하면 두 요소의 성격을 모두 가짐

# display의 속성 값으로 inline-block을 적용하면, inline 요소도 block 요소처럼 width와 height을 설정할 수 있다.

뿐만 아니라 동시에 inline요소의 특성도 갖게 된다.

# inline-block은 x축 정렬이면서 공간에 대한 크기를 만들고, 상하 배치작업 까지 진행되었으면 할 때 inline-block은 내비게이션 버튼을 만들 때 주로 사용

float

 <div class = “left”> Hello World </div> 
 <div class = “right”> Hello World </div>
/* style.css 문서 */ 
.left { float: left; } 
.right { float: right; }

선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시키고자 할때 사용

이름 그대로 선택자를 띄워 새로운 레이어층을 만드는 것

# float의 위치는 부모의 영역 내에서 정렬된다. 만약 부모의 영역보다 2개의 float 크기가 클 경우, 레이아웃이 틀어지게됨

(float의 width와 동일하거나 커야한다.)

레이어가 겹쳐지지 않는 상태로 왼쪽에서부터 정렬시키고 싶은 경우 float: left; 을 연속적으로 입력

clear

float에 대한 속성을 제어하고자 할 때

float을 사용한 마지막 영역 다음에 clear를 배치

# float을 사용할 경우 레이어가 겹치기 때문에
이를 제거하기 위해 clear를 사용
float과 clear를 한쌍이라고 생각하면 됨.

# clear 속성 값으로
left / right / both 3가지가 있지만, both를 흔히 사용(양쪽에 대한 기능을 모두 꺼주겠다)

브라우저와 공간 사이의 공백 제거

<html>과 <body>태그는 margin과 padding 값을 가지므로 초기화를 해주어야 함

혹은 * 로 모든 html 태그 선택 가능

04. 실습관련

디폴트 CSS 코드

• vertical-align: middle;
이미지의 수직 정렬을 중앙으로 맞추는 디폴트 값

• text-decoration: none;

<a>태그의디폴트값인밑줄제거

• list-style: none;
<ul> 태그 동그라미 기호 및 <ol>태그숫자기호제거

선택자 지정 시 유의 사항

li.one처럼 붙여 써야 <li> 태그 중 클래스 one을 선택하겠다는 의미

띄어 쓰면 부모 자식지간이라는 의미

3. 움직이는 웹사이트 제작

01. Transform

rotate, scale

.transition {
	transform: rotate(45deg); /* 회전 */ 
	transform: scale(2, 3); /* 확대 축소 */
}

• rotate(45deg); 입력한 각도만큼 회전 음수도 입력 가능 (평면적 회전을 의미)

• scale(2, 3); 숫자는 비율을 의미 width를 2배, height를 3배 확대 (축소를 하고싶을 때는 0.5와 같이 소수점을 사용)

skew, translate

.transition {
    transform: skew(10deg, 20deg); /* 각도 변경 */
    transform: translate(100px, 200px); /* 위치 변경 */
}

• skew(10deg, 20deg); x축 y축을 기준으로 입력한 각도만큼 비틂

• translate(100px, 200px): 선택한 오브젝트의 좌표 변경

prefix 접두사

.transition {
	-webkit-transform: translate(100px, 200px); /* 크롬, 사파리 */
	-moz-transform: translate(100px, 200px); /* 파이어폭스 */
    -ms-transform: translate(100px, 200px); /* 익스플로러 9.0 */
    -o-transform: translate(100px, 200px);  /* 오페라 */
}

다른 버전의 브라우저에서의 실행을 원할 경우

02. Transition

property, duration

 .transition{
    transition-property: width;
    transition-duration: 2s;
}

• property : 효과를 적용하고자 하는 css 속성

• duration : 효과가 나타나는데 걸리는 시간

time-function, delay

.transition{ 
	ransition-timing-function: linear; 
    transition-delay: 1s;
}

• timing-function : 효과의 속도 / linear은 ‘일정하게’라는 의미

• delay : 특정 조건하에서 효과발동 / 1s는 ‘1초 후’라는 의미

가상 선택자 :hover

 .transition: hover { width: 300px; }

css에서 미리 만들어 놓은 클래스 ‘마우스를 올렸을 때’ 라는 조건

Transition 종합

.transition{
    transition: width 2s linear 1s;
}

.transition:hover { width: 300px; }

마우스를 올리면 1초 후에 width 값이 300px로, 2초 동안, 속도 일정하게 변하는 애니메이션 효과 발동

duration과 delay를 동시에 사용할 때, 항상 duration이 앞에 나오며,
숫자가 하나인 경우 -> duration (duration과 delay의 위치관계를 제외한 나머지는 자유롭게 사용 가능)

03. Animation

animation

.animation {
	animation-name: changeWidth; 
	animation-duration: 3s; 
	animation-timing-function: linear; 
	animation-delay: 1s; 
	animation-iteration-count: 6; 
	animation-direction: alternate;
}

@keyframes changeWidth { 
	from { width: 300px; } 
    to { width: 600px; }
}

• name: name: 내가 만들고자하는 애니메이션 이름 정의 (개발자가 임의로 작성 가능)

• iteration-count : 애니메이션 반복 횟수 (무한대로 반복을 원할경우 infinite)

• direction : 애니메이션 진행 방향 ( count가 유효수 일경우 from - to 가 1회)

alternate: from→to→from
normal : from→to, from→to
reverse: to→from, to→from

애니메이션이 수행되기 위해서는 일종의 명령어가 필요 : @keyframes
keyframes 옆에는 변화를 줄 애니메이션 이름,
안에는조건 변화를 줄 실제 결과값 입력

.animation{
    animation: changeWidth 3s linear 1s 6 alternate;
} /* 한줄로 정의 가능 (duration과 delay 위치 중요) */

04. Transform & Animation

trasnform & animation

 .box1 {
	animation: rotation 1500ms linear infinite alternate;
  }
@keyframes rotation {
	from { transform: rotate(-10deg); } 
    to { transform: rotate(10deg); }
}

prefix 작성 시 유의 사항

 .box1 {
	animation: rotation 3s linear 1s 6 alternate;
}
@-webkit-keyframes rotation {
	from {-webkit- transform: rotate(-10deg); } 
    to {-webkit- transform: rotate(10deg); }
}

prefix 만큼 keyframes 작성해야함

4. 반응협 웹사이트 제작

01. 미디어쿼리

미디워쿼리란?

pc 뿐만 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기 위해
모바일에 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문

미디어쿼리 media

.media {
  width: 500px;
  height: 500px;
  background-color: red;
}
@media (min-width: 320px) and (max-width: 800px) {
  .media {
  	width: 300px;
	height: 300px;
  	background-color: yellow;
  }
}

min-width와 max-width로 브라우저 가로폭 설정
브라우저의 가로폭이 최소 320px, 최대 800px이 되었을 경우, 중괄호 안의 css속성으로 대체하겠다는 의미

미디어쿼리가 정상적으로 출력되는 확인하는 법

우클릭 후 크롬 개발자도구에 접속

Troy Labs : 단, 결과물이 서버에 등록되어 있어야 함

미디어쿼리 사용시 주의사항

viewport

 <meta name="viewport" content=“width=device-width, initial-scale=1.0”>

미디어쿼리가 제대로 작동하지 않는 문제가 발생할 수 있으므로

viewport로 너비와 배율을 설정해야 모바일 디바이스에서 의도한 화면을 볼 수 있음.

다양한 디지털 기기의 화면 상에 표시되는 영역을 의미 너비와 배율을 설정할 때 사용하는 메타 태그의 속성 중 하나

• width=device-width viewport의 가로폭 = 디바이스의 가로폭

• initial-scale=1.0 비율은 항상 1.0

CSS 속성 상속

미디어쿼리 외부 영역에 있는 CSS 속성을 상속받음

만약상속을받지않고자하면 속성값으로 none 입력

'IT > 엘리스 AI 트랙' 카테고리의 다른 글

[엘리스 AI 트랙 2기] 3주차-JavaScript 기초(07/07) (0)	2021.07.08
[엘리스 AI 트랙 2기] 3주차-Web(07/06) (0)	2021.07.06
[엘리스 AI 트랙 2기] 02주차-실시간 이론강의. 알고리즘(06/30) (0)	2021.07.05
[엘리스 AI 트랙 2기] 2주차-자료구조(06/29) (0)	2021.07.04
[엘리스 AI 트랙 2기] 2주차-실시간 이론강의. 자료구조(06/28) (0)	2021.07.03