HTML 기본/CSS 기본 속성/CSS 적용법

7465 단어 웹개발경일게임아카데미htmlCSSCSS

전 시간 복습

HTML 주의사항

파일명을 만들 때 영어로 할 것

확장자는 파일명.html로 만들 것

특수문자/띄어쓰기 X

예외 특수문자 - _ (예시 hello_world.html)

Tip
! 만 쳐도 HTML형태로 완성된다.

Point*

<input> 속성과 속성값 구분할 줄 알아야 함

내가 쓰는 속성이 block / inline 인지 구분할 수 있어야 함

표를 만들 수 있어야 함

표 생성 엘리먼트

table = 표 생성 엘리먼트

tr = 줄 생성 엘리먼트

td = 칸 생성 엘리먼트

CSS

HTML보다 다양하고 편리하게 스타일을 변경하는

스타일 시트의 표준안이 바로 CSS이고

CSS에는 3가지 적용 방법이 있다.

inline 스타일

<body>
    <h1 style="font-size:12px; background-color: red;">1</h1>

inline 스타일은 <body>에서 사용 가능하고

하나의 요소에만 스타일을 적용한다.

style 엘리먼트

<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>
    <style>
        #title{
            font-size:12px;
            background: yellow;
        }
        .title{
            font-size:12px;
            background: green;
        }
    </style>
</head>

<style> 는 <head>영역에서 사용할 수 있다.

#title은 id속성에 "title"에 적용이 된다

.title은 class 속성에 적용이 된다.

참조

{ }는 선택자에 있는 css를 확실하게 구분하기 위해 사용 (컴퓨터가 이해하기 쉽게)

'>'는 하위 엘리먼트를 뜻함.

CSS는 중복되었을 때는 가장 아래에 있는 코드가 입혀진다.

외부 파일 가져오기

<link> 사용

<link> 라는 태그는 3가지의 속성값이 있다.

href : 파일의 경로

type : 파일의 형태

rel : stylesheet

  <link href=".\css\index.css" type="text/css" rel="stylesheet">
  <link> 를 사용하여 외부 CSS를 가져올 수 있다.

경로 이동 연습하는 법 (연습하기)

명령 프롬프트 켠 후 \마다 끊어서 cd 이동할 경로

ex) C:\Users\pc\Documents\코딩\index.html\css

css 속성

style: 해당 속성에 글씨 크기, 색상을 바꾼다.

font size: 글씨 크기를 조절할 수 있다.

ex) font - size:12px;

background: 내가 차지하는 공간에 색상을 입힐 수 있다.

ex) background: red;

*{}: 모든 엘리먼트들을 뜻한다.

margin: 외부 엘리먼트들 간의 사이를 띄울 수 있다.

ex)
margin :100px

상하좌우 방향이 다를때
margin : 100px 150px 200px 100px (위쪽 방향부터 시계방향)

상하/좌우만 다를때
margin : 100px 200px (상하) (좌우)

padding: 내부 엘리먼트들 간의 사이를 띄울 수 있다.

box-sizing: border-box : border : boeder - box의 크기를 조절해 준다.

참조

CSS에서 ;는 끝나는 부분을 지정한다.

;가 없으면 컴퓨터가 이해할 수 없다.

[nGrinder] 설치와 사용법 정리
iOS 다른 스토리보드 가져오는법(NavigationBar)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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