[ codeit ] 웹 퍼블리싱 - HTML/CSS 시작하기

웹 퍼블리싱/웹 퍼블리싱 (완)

[ codeit ] 웹 퍼블리싱 - HTML/CSS 시작하기

web_seul 2021. 5. 23. 19:12

수업소개

1강. 서비스가 주도하는 시대에 살아남는 법

서비스가 주도하는 시대 _ 서비스를 통해 새로운 가치창출, 웹

왜 하필 '웹'일까? _ 연결고리, 모바일앱 -> Progressive Web Apps(PWAs)

'프로그레시브 웹 앱'은 웹의 장점과 앱의장점을 결합한 것이며, 앱 수준과 같은 사용자 경험을 웹에서 제공하는것을 목적으로 함, All-in-One 어플리케이션

웹접근성은 https://www.w3.org/TR/WCAG21/ (한글 비공식 번역은 http://www.kwacc.or.kr/WAI/wcag21/)

웹표준은 https://www.w3.org/standards/

https://seulbinim.github.io/WSA/

2강. 1분 안에 웹사이트 런칭하기

repl.it 온라인 프로그래밍 서비스

3강. 코딩은 어디에 하면 되나요?

4강. 수업소개

HTML (Hyper Text Markup Language), CSS(Cascading Style Sheets), Javascript

HTML/CSS 시작하기

1강. 나의 첫번째 웹사이트!

2강. 기본 HTML 태그 정리

<!DOCTYPE html> : 웹브라우저에게 HTML버전을 알려주는 역할( 자동 html5 )

HTML 태그(요소)

<태그>내용</태그>

<title> : 페이지의 제목, 브라우저 탭이나 방문기록에 나오는 태그

<h1>~<h6> : 여러 개의 머리말 h1>h2>..>h6 (크기, 중요도)

<p> : 문단, 위아래 기본 여백

3강. 굵게쓰기, 날려쓰기

<b> : 굵게

<i> : 기울임

//h1태그의 기본값
h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

태그가 가진 기본값 https://www.w3schools.com/cssref/css_default_values.asp

4강. <b>태그, <i>태그 정리

<em>,<strong> : 같은 기능 + 의미를 갖는 태그

5강. 한글이 깨져요

한글인식,지원 인코딩 방식 필요

//한글을 인식하는 대표적 인코딩 방식
<meta charset="utf-8">

6강. CSS기초

css기본 문법 : 스타일링하고싶은 요소, 속성, 속성 값

7강. 기본 CSS 속성 정리

폰트 크기(px), 텍스트 정렬(text-align), 텍스트 색(color), 여백(margin)

8강. 텍스트 꾸미기 연습

9강. head, body, html 태그

10강. 옵셔널 태그, 꼭 써야 할까?

정리목적으로 사용 or 옵셔널태그 생략을 권장하는 구글스타일가이드

11강. 링크

<a href="가고싶은 주소"> : 하이퍼링크 a태그

//새창열기
<a href="https://google.com" target="_blank">

//폴더경로(상위) 
<a href="../folder1/img.png">

12강. 이미지

<img src = "이미지주소" width="" height="" alt="이미지 대체 텍스트">
//   속성

<img src="img폴더 경로">

//이미지 가운데 정렬
img{
   //기본값은 inline-block;
   display: block;
   margin-left: auto;
   margin-right: auto;
}

text-align:center -> inline 요소

margin: 0 auto -> block 요소

13강. 사이즈 설정

픽셀(px) : 가장 작은 단위

px 또는 %

14강. 프로필 페이지

어떤 섹션

1강. 클래스(class)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      .blue{color:blue;}
      .center{text-align: center;}
    </style>
</head>
<body>
    <p class="blue">첫번째</p>
    <p class="center">두번째</p>
</body>
</html>

2강. 아이디(id)

class : 중복 가능, 여러 class 가능

id : 중복 불가능, 여러 id 불가능

3강. '클래스(class)'와 '아이디(id)' 정리

class : . 으로 선택

id : # 으로 선택

4강. 듀엣 가요제

5강. 노래 브리지

6강. <div> 태그

7강. css파일 따로 쓰기/ link로 연결

<link href="css/style.css" rel="stylesheet">
//           css파일주소     파일과의 관계

//type="text/css" html5부터 생략가능

8강. 어떤 방식으로 css를 써야할까?

- 외부 css파일 _ <link href="" rel=""> : 정돈된 파일 정리, 같은 스타일적용,

- <style></style> : 간단한 적용확인

- inline style : 간단한 적용확인

9강. 스타일을 적용하는 다양한 방법

꿀팁

1강. 코멘트

ctrl + /

<!--여러줄 코멘트-->
//한줄 코멘트
/* 여러줄 코멘트 */

2강. 코멘트 정리

3강. 크롬 개발자 도구

F12 (도구더보기-개발자도구)

user agent stylesheet : 기본 스타일

4강. 도움되는 웹사이트

w3schools, Stack Overflow, JSFiddle

텍스트 스타일링

1강. 텍스트 색

.txtColor{
   color: red;
   color: #ff0000ff; //+투명도
   color: rgba(255,0,0,1);
}

2강. 텍스트 색 정리

색이름 : red, orange, lime ..

RGB값 : rgb(255,255,255)

HEX 값(16진법) : #ff0000

3강. 몇가지 텍스트 스타일링

/* 폰트마다 지원하는 weight가 다름 */
.weight{font-weight: 100;}

/* 정렬 */
.align{text-align:center;}

/* decoration */
.decoration{
   text-decoration: underline; //overline, line-through
}

4강. 폰트 굵기 설정

font-weight: 100 ~ 900

5강. 가운데 정렬이 안 돼요

block, inline의 차이 알기

6강. 텍스트 정렬

text-align

7강. 텍스트 꾸미기

text-decoration: underline, overline, line-through, none

8강. 폰트 크기

절대적 px, pt vs 상대적 em, % (부모 요소의 크기에 대한 em, % / 1em = 100% )

9강. line-height

ex. font-size: 40px 인 텍스트는 59px의 line-height를 가짐

-> line-height를 99px로 할 경우 위아래로 각각 20px씩 여백이 더 생김

-> line-height를 40px로 폰트크기와 맞출 경우 위아래로 각각 -9.5px의 여백이 줄어듬

10강. 폰트 설정

Serif : Times New Roman, 궁서체 / 끝이 휘어진 타입

Sans-Serif : Arial, 굴림체 / 끝이 깔끔한 타입

Monospace : Courier, Courier New / 폰트의 폭이 동일

Cursive : Comic Sans MS, Monotype Corsiva / 필기체

Fantasy : Impact, Haettenschweiler / 특이한 타입

{font-family: "Times New Roman", "Times", serif;}
//앞의 폰트를 우선순위로 폰트 적용

11강. 구글 폰트

fonts.google.com

<link href="폰트"> //웹에서 폰트를 다운받아오는 역할

.roboto-font{font-family:'roboto';}

12강. 각 폰트 보여주기

구글폰트 하단 license 확인하기

13강. 폰트 파일 사용하기

@font-family{
   src: url("폰트저장 경로");
   font-family: "Jua";
}

.Jua-font{
   font-family: "Jua"; //font-family에서 정한 이름으로
}

14강. span태그

여행사이트

<link rel="stylesheet" href="css/style.css">

저작자표시

'웹 퍼블리싱 > 웹 퍼블리싱 (완)' 카테고리의 다른 글

[부스트코스] 웹 접근성 지침 (0)	2022.04.27
[ codeit ] 웹 퍼블리싱 - HTML/CSS 핵심 개념 (4) (0)	2021.06.01
[ codeit ] 웹 퍼블리싱 - HTML/CSS 핵심 개념 (3) (0)	2021.05.30
[ codeit ] 웹 퍼블리싱 - HTML/CSS 핵심 개념 (2) (0)	2021.05.29
[ codeit ] 웹 퍼블리싱 - HTML/CSS 핵심 개념 (1) (0)	2021.05.24

현재글[ codeit ] 웹 퍼블리싱 - HTML/CSS 시작하기

My record for programming.

Today :
Yesterday :

기록저장소