1주차- HTML/CSS기초

코린이·2022년 4월 4일

CSS html

엘리스 AI 트랙

목록 보기

1/7

📃 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> 태그`

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 태그 선택 가능하다.

코린이

초보 개발자

다음 포스트