Week1 - HTML & CSS (1)

6858 단어 htmlCSSCSS

HTML

Hypertext Markup Language
웹페이지 만드는데 사용되는 언어
(Hypertext : HTML페이지가 가지고 있는 하이퍼링크/
Markup Language : 페이지 내의 레이아웃 및 요소를 정의하는 언어)

HTML 문서의 구조

<!DOCTYPE html>
   <head>
    <meta charset="utf-8">
    <title> 제목표시줄에 표시할 title </title>
    <link rel="stylesheet" type="text/css" href="파일이름.css">
    <script src="파일이름.js"></script>
   </head>
   <body>
    <p> 본문내용 </p>
   </body>
 </html>

DOCTYPE선언/<!DOCTYPE html>
: html을 사용하기 위해서는 먼저 문서의 최상단에서 DocType을 선언

HEAD/<meta charset="utf-8">
: 모든 언어를 표시할 수 있는 표준코드로, 설정하지 않을 시 글자 깨짐 현상 발생

HEAD/<title> 제목표시줄에 표시할 title</title>
: 제목 표시줄에 보일 내용을 지정

HEAD/<link rel="stylesheet" type="text/css" href="파일이름.css">
rel="stylesheet" : 링크의 내용이 이 문서의 스타일 시트임을 나타냄
type="text/css" : type attribute를 명확하게 하기 위해
href="파일이름.css" : 스타일 시트 파일을 연결, 확장자명 포함

HEAD/<script src="파일이름.js"></script>
: javascript파일을 연결, 확장자명 포함

BODY 안에 페이지 내용이 포함

HTML용어 : 요소, 태그, 속성

<div class="main">제목입니다..</div>
<a href="https://google.com">GOOGLE</a>
<img id="profile" src="profile.jpg" width="200px" alt="profile:>

요소 element : 각각이 모두 요소에 해당
태그 tag : div, a, img는 태그
속성 attribute : class, href, id, src, width, alt 모두 속성

CSS

Cascading Style Sheet 웹페이지의 레이아웃을 갖추는 스타일 시트
CSS는 텍스트 스타일, 표의 크기 및 HTML에서 미리 정의된 웹페이지의 모양 나타냄

CSS용어 : 선택자, 선언, 속성, 속성값

선택자 Selector : 특정요소를 선택하여 스타일을 적용할 수 있게,
tag선택자 외에도 전체 선택자, class선택자, id선택자 등 이용가능

* { background-color: yellow }                전체 선택자
p { background-color: yellow }                tag 선택자
.classname { background-color: yellow }       class 선택자
#idname { background-color: yellow }          id 선택자
.classname p { background-color: yellow }     복합 선택자

위 예시 중 복합 선택자는 classname이라는 class를 부모로 가진 p tag에 해당하는 요소를 선택하여 스타일을 적용
선언 Declaration : 속성값을 선언하여 선택한 요소에 스타일을 적용
속성 Property : 아래 예시는 CSS에서 자주 사용되는 텍스트 관련 속성

  1. color : 텍스트 색상 결정, 색이름 & RGB(a) & HEX 이용
  2. font-weight : 텍스트 두께 설정, 100 ~ 900 사이의 숫자 또는 lighter, normal, bold, bolder 를 사용
  3. text-decoration : 꾸밈 설정, 밑줄을 넣거나(underline) 뺄 수 있음(none)
  4. font-style : 기울임 설정, italic과 oblique(그대로 기울임)사용
  5. font-family : 글씨체 설정

구조:웹콘텐츠에 의미를 부여하고 구조 형성->HTML
표현:시각적인 디자인과 레이아웃 표현->CSS
행위:모든 front-end의 브라우저 상호작용 담당->JavaScript

JSON 분석 라 이브 러 리 의 Gson (2) - 범 형 대상 맵, List 와 JSON 문자열 의 상호 전환
20/10/16

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage