1주차- HTML/CSS기초
📃 HTML/CSS 기초 - 1장
1. 웹을 구성하는 요소
▷ HTML/CSS/JavaScript
- HTML : 정보 또는 설계도
- CSS : 디자인 또는 스타일링
- JavaScript : 기능과 효과
▷ 웹사이트 제작시 고려사항
- 웹 표준 : 웹 사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격
- 웹 접근성 : 장애의 여부와 상관없이 모두가 웹사이트를 이용할 수 있어야 함.
- 크로스 브라우징 : 모든 브라우저 또는 기기에서 사이트가 제대로 작동해야 함.
2. HTML 기본 태그
HTML이란?
Hypertext Markup Language
웹 문서를 만들기 위하여 사용하는 기본적인 웹 언어의 한 종류
웹 사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어
▷ HTML 태그 구성 요소
<열린태그 속성 = "속성값"> 컨텐츠</닫힌태그>
- 태그명 : HTML이 가지고 있는 고유 기능
- 컨텐츠 : 내용
- 속성 : HTML 태그가 갖고 있는 추가 정보
- 속성값 : 구체적인 명령
▷ HTML 문서의 기본 구조
<!DOCTYPE html> <!-- HTML5 문서 선언-->
<html lang="en">
<head> <!-- 문서와 관련된 요약 정보, 노출되지 않는 정보 -->
<meta charset="UTF-8"> <!-- 문자 코드 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <!-- 웹사이트 제목 -->
</head>
<body> <!-- 웹사이트 내용, 눈에 보이는 정보를 담당 -->
</body>
</html>
▷ <a>
태그
<a href = "html 연결할 페이지의 주소 지정" target = "어떤방식으로 이동할지 결정"> 내용 </a>
- 💡 target의 속성값
- "_self" : 현재 탭에서 웹사이트를 전환(기본 값으로 생략 가능)
- "_blank" : 새 탭에서 웹사이트를 전환
- "_parent" : 부모 프레임에서 웹사이트를 전환
- "_top" : 현재 윈도우의 전체에서 웬사이트를 전환
▷ <img> 태그
<img src = "삽입할 이미지 파일 경로" alt = "이미지를 출력 x 경우, 텍스트 정보로 대체" >
▷ <h> 태그
Hypertext Markup Language
웹 문서를 만들기 위하여 사용하는 기본적인 웹 언어의 한 종류
웹 사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어
<열린태그 속성 = "속성값"> 컨텐츠</닫힌태그>
<!DOCTYPE html> <!-- HTML5 문서 선언-->
<html lang="en">
<head> <!-- 문서와 관련된 요약 정보, 노출되지 않는 정보 -->
<meta charset="UTF-8"> <!-- 문자 코드 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <!-- 웹사이트 제목 -->
</head>
<body> <!-- 웹사이트 내용, 눈에 보이는 정보를 담당 -->
</body>
</html>
<a>
태그<a href = "html 연결할 페이지의 주소 지정" target = "어떤방식으로 이동할지 결정"> 내용 </a>
- "_self" : 현재 탭에서 웹사이트를 전환(기본 값으로 생략 가능)
- "_blank" : 새 탭에서 웹사이트를 전환
- "_parent" : 부모 프레임에서 웹사이트를 전환
- "_top" : 현재 윈도우의 전체에서 웬사이트를 전환
<img> 태그
<img src = "삽입할 이미지 파일 경로" alt = "이미지를 출력 x 경우, 텍스트 정보로 대체" >
<h> 태그
h태그는 heading의 약자로 제목이나 부제목을 표현한다.
h뒤에 붙은 숫자값이 클수록 사이즈가 작아지고, 중요도가 떨어진다.
<h1>
태그는 가장 중요한 정보를 나타내므로, html 문서에서 한번만 사용된다.
▷ <p> 태그
p 태그는 본문내용을 표현한다. 웹사이트의 중요정보를 담는다.
▷ <ul>, <ol>, <li> 태그
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<ol>
ol 태그는 순서가 있는 리스트를 생성한다.
ul 태그는 순서가 없는 리스트를 생성한다. -> 메뉴버튼을 만들 때 사용
3. 구조를 잡을 때 사용하는 태그
<header>
<nav>
</nav>
</header>
<header>
태그는 웹사이트의 상단영역, 즉 머리글을 담는 공간이다.
<nav>
태그는 메뉴버튼을 담는 공간으로 <ul>
<li>
<a>
와 함께 사용한다
<main role = "main">
<article>
</article>
</main>
<main>
태그는 문서의 주요내용을 담는다.
internet Explorer는 지원하지 않음 => role="main" 속성 필수 입력
<article>
태그는 정보영역으로 <h#>
태그가 존재해야 한다.
<footer>
<div>
<p> </p>
</div>
</footer>
<footer>
태그는 웹사이트의 하단영역을 의미한다.
<div>
는 임의의 공간을 만들때 사용한다.
4. HTML 태그의 두가지 성격
- Block 요소
- y축으로 정렬되어 출력
- 줄바꿈 현상이 나타남
- 상하배치 가능 -> margin / padding 값 사용 가능
- 공간 만들기 가능 -> width / height 값 사용 가능
<p>
<div>
<h#>
등이 있다.
- Inline 요소
- x축으로 정렬되어 출력
- 줄바꿈 현상 x
- 공간 만들기 x, 상하 배치 작업 x
- margin/ bottom / padding / width / height 값 적용 불가능
<a>
<img>
<button>
<input>
5. CSS
선택자 { 속성 : 속성값;}
div{
font-size:20px;
color: blue;
}
선택자 : 디자인을 적용할 html영역
속성값은 세미콜론(;) 필수 입력
▷ css 적용 방법
- Inline Style Sheet : 태그안에 직접 스타일을 적용하는 방법
<div style = "color: blue;"> 글자 <div>
- Internal Style Sheet :
<style>
태그 안에 넣는 방법
<head>
<style>
div { color : blue;}
</style>
</head>
- External Style Sheet :
<link>
태그로 불러오는 방법
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
rel : 필수 속성, 현재문서와 외부 리소스 사이의 연관 관계를 명시
href : 링크될 외부 리소스의 URL를 명시
type : 링크된 외부 리소스의 미디어 타입을 명시
6. CSS 선택자
선택자로는 TYPE, Class, ID가 있다.
특정 태그에 스타일을 적용할 경우는 type의 이름을 그래도 사용.
클래스 이름으로 스타일을 적용할 경우는 .
을 사용
ID를 이용하여 스타일을 적용하는 경우는 #
을 사용
<style>
div {
color:blue;
}
.ClassName {
color:blue;
}
#Id {
color:blue;
}
</style>
7. 부모 자식 관계
<header>
<h1>자식1</h1>
<p>자식2</p>
</header>
/* style.css 문서 */
header p {
color : blue;
}
<header>
와 <h1>
<p>
는 부모 자식 관계이다
<h1>
과<p>
는 형제 관계이다.
원하는 지역에먼 css를 적용하기 위해서는 부모를 구체적으로 표기하면 된다.
8. 캐스케이딩
css의 우선순위는 순서, 디테일, 선택자에 의해서 결정된다.
- 나중에 적용한 속성값이 우선순위가 높다.
- 더 구체적으로 작성된 선택자의 우선순위가 높다.
footer p { color: blue;} /* 우선순위가 더 높음 */
p { color: green; }
- 선택자에 의한 캐스케이딩
style > id > class > type 순으로 우선순위가 높음
📃 HTML/CSS 기초 - 2장
1. 박스모델
margin
: border 바깥쪽에 여백을 만듦
padding
: border 안쪽에 여백을 만듦
2. 마진 병합 현상
형제간의 margin
이 겹치는 부분이 있을 경우, 숫자가 큰 값이 적용된다.
3. 레이아웃에 영향을 미치는 속성
▷ display
display는 block과 inline 요소의 성격을 바꿀 때 사용
inline-block을 사용하면 두 요소의 성격을 모두 가진다.
▷ float
선택된 요소를 왼쪽, 오른쪽 끝에 정렬시키고자 할때 사용한다.
float 이름 그대로 선택자를 띄워 새로운 레이어 층을 만드는 것이다.
left
right
none
inherit
값을 가질 수 있다.
▷ Clear
clear로 float를 제어할 수 있다.
원래대로 배치하도록 하는 속성.
.clear{
clear : both;
}
both : 오른쪽 왼쪽을 모두 취소, 가장 많이 사용
📃 HTML/CSS 기초 - 3장
1. Transform
transform 속성을 사용하여 요소에 회전, 크기 조절, 기울기, 이동 효과를 부여할 수 있다.
.box{
transform : rotate(50deg); /* 입력한 각도만큼 회전 음수도 가능 */
transform : scale(3,5); /* 확대 축소를 의미 width를 3배, height를 5배 확대 */
transform : skew(20deg, 30deg); /* x축(앞), y축(뒤) 기울이기 */
transform : translate(10px,20px); /* 입력된 좌표로 요소 위치 변경 */
}
2. Transition
transition
은 요소의 변화를 부드럽게 해주는 기능으로 애니메이션을 구현할 경우 사용한다.
📝 Transition 속성
transition-property : 효과를 적용하고자 하는 css 속성.
transition-duration : 효과가 지속되는 시간.
transition-timing-function : 효과 속도를 지정.
transition-delay : 효과가 나타나기 전까지의 시간 설정.
.box{
transition: property duration timing-function delay;
}
transition
속성값들을 한줄로 작성할 때 duration
이 먼저, delay
가 나중에 작성 되어야 한다.
나머지 속성값의 순서는 상관 x
가상 선택자:hover
마우스를 올렸을 때
.box:hover { color:blue; }
3. Animation
📝 Animation 속성
animation-delay : 언제 애니메이션이 시작될지 지정.
animation-direction : 애니메이션 진행 방향을 지정.
alternate
: 순방향 -> 역방향 -> 순방향 번갈아 재생normal
: 순방향 재생(기본값)reverse
: 역방향 재생
animation-duration : 애니메이션 지속시간 지정
animation-iteration-count : 애니메이션 반복 횟수 지정
animation-name: 애니메이션 중간상태 지정하기 위한 이름을 정의 중간상태는 @keyframe
규칙을 이용
- 유효한 애니메이션 이름 : 문자열로 시작, _로 시작, - 로 시작
- 유효하지 않는 이름 : 숫자로 시작, 특수 문자로 시작
animation-play-state : 애니메이션 재생 여부 지정
running
: 애니메이션 재생(기본)paused
: 애니메이션 정지
animation-timing-function : 애니메이션 효과 속도 지정
- linear : 일정한 속도로 진행
- ease : 기본값, 천천히 시작되어 점차 빨라지고, 마지막에는 다시 느려짐
- ease-in : 애니메이션 효과 천천히 시작
- ease-out : 애니메이션 효과 천천히 끝남
📃 HTML/CSS 기초 - 4장
미디어쿼리
미디어 쿼리란 사이트에 접속하는 다양한 기기들에 대응되는 웹사이트를 만들기위해 사용되는 것으로 반응형 웹사이트를 만들 때 사용되는 CSS 구문이다.
@media (min-width: 200px) and (max-width: 360px) { /* 스타일 정의 */}
미디어 쿼리는 외부 영역에 있는 CSS 속성을 상속 받으므로 상속받지 않고 싶을 땐 none을 입력해준다.
viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport : 스마트폰 화면에서 실제 내용이 표시되는 영역으로 화면을 모바일에 맞게 표시해주는 설정이다.
미디어쿼리가 제대로 작동하지 않는 문제가 발생할 수 있어 viewport로 너비와 배율을 설정해야 스마트폰에서 의도한 화면을 볼 수 있다.
💡 Tip!
<html>
과 <body>
태그는 margin과 padding값을 가지고 있으므로 초기화를 해주어야 한다.
*
로 모든 html 태그 선택 가능하다.
Author And Source
이 문제에 관하여(1주차- HTML/CSS기초), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@pinkpig_21/1주차저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)