728x90
반응형

 

2개 틀렸당..ㅠ

 

 

[HTML]

 

 

주석

<!-- 주석-->

 

제목

<h1>~<h6> : heading

 

본문

<p> : paragraph 하나의 단락 만들기

<br /> : 줄바꿈

<hr /> : 수평 줄

<a href="#"> blah </a> : 빈 링크만들기 

<a href="#apple"> blah </a> : id="apple" 속성을 가진 태그로 이동하기

id속성은 중복되면 안 된다. 중복된다면 먼저 나오는 태그로 이동한다.

 

글자형태-> 스타일시트로 처리하므로 최근에는 잘 사용안함

 

목록

<ul> unordered list

<ol> ordered list

<li> list item

 

테이블

<table> </table>

<tr> : 행

<th> : 제목 셀

<td> : 일반 셀

<body>
    <table border="1"> <!-- border없으면 표테두리 안나옴, border값 커질수록 테두리두께커짐-->
        <tr>
            <th>제목1</th>
            <th>제목2</th>
        </tr>
        <tr>
            <td>data1</td>
            <td>data1</td>
        </tr>
        <tr>
            <td>data2</td>
            <td>data2</td>
        </tr>
    </table>
</body>

 

이미지

<img src=" " alt="이미지가 없을 때 나오는 글자" width=" " height=" " />

 

오디오(비디오)

<body>
    <audio>
        <source src="Kalimba.mp3" type="audio/mp3" />
        <source src="Kalimba.ogg" type="audio/ogg" />
    </audio>
</body>

 

입력양식

<form>
    <label for="name">이름</label>
    <input id="name" type="text" />
    <input type="submit" />
    <input type="button" />
    <input type="checkbox" />
    <input type="file" />
    <input type="password" />
    <input type="reset" />
</form>

 

공간분할

<div> : block형식

<span> : inline형식

 

시맨틱구조 태그 = div태그와 같은 기능

<header> : 헤더

<nav> : 내비게이션

<aside> : 사이드에 위치하는 공간

<selection> : 여러 중심 내용을 감싸는 공간

<article> : 글자가 많이 들어가는 부분

<footer> : 푸터

팁
파일과 폴더 이름은 항상 소문자로 작성
파일 이름 뒤에 파일 형식 작성 (html, css, mp4 등)
확장 프로그램 추천 : community material theme, material icon theme, wakatime

 

단축키모음
html파일을 웹브라우저에서 열기 : ctrl + alt + o
크롬 탭 바꾸기 : ctrl + tab (다음탭), ctrl + shift + tab (이전탭), ctrl + 원하는 탭 번호
반복되는 단어 한번에 바꾸기 : ctrl + d (여러번 눌러야함) , ctrl + f2 (한번에 선택)
선택하는곳마다 커서 생성 : alt + click
코드 위 아래로 움직이기 : alt + up,down
코드 코멘트처리하기 : ctrl + /
사이드바 열고 숨기기: ctrl + b

[CSS]

CSS3 선택자는 특정한 HTML태그를 선택하고, 해당 태그에 원하는 스타일을 적용한다.

 

 

전체 선택자

* { color : red; }  <!--html, head, title, style, body 태그 모두 선택하여 스타일 적용됨-->

 

태그 선택자

p { color : red; }

p, h1, h2 { color : red; } <!--쉼표로 연결 가능-->

 

아이디 선택자

#header { color : red; } <!--특정한 하나의 태그 선택할 떄 사용됨, id 속성의 속성값으로 header를 가지는 태그의 color 속성에 red 키워드를 적용-->

 

클래스 선택자

.select { color : red; } <!-- 웹개발에서 가장 많이 사용됨, class 속성의 속성값으로 select를 가지는 태그의 color속성을 red키워드로 적용-->

 

태그 선택자와 클래스 선택자 함께 사용

li.select { color : red; } <!-- li태그 중 class 속성값으로 select를 가지는 태그의 color속성을 red키워드로 적용-->

 

속성 선택자

input[type=text] { background: red; }

 

후손 선택자 (자손을 포함함)

#header h1, #header h2 { color : red; } : #header의 후손에 위치하는 h1과 h2 태그 선택

 

자손 선택자

#header > h1 {color : red; } : #header의 자손에 위치하는 h1 태그 선택

 

동위 선택자

동위 관계에서 뒤에 위치한 태그를 선택할 때 사용하는 선택자

 

h1 + h2 : h1 태그 바로 뒤에 위치하는 h2 태그 선택

h1 ~ h2 : h1 태그 뒤에 위치하는 모든 h2 태그 선택

 

반응 선택자

h1:active : h1태그에 마우스로 클릭할 때 

h1:hover : h1태그에 마우스를 올릴 때

 

상태 선택자

:checked

:focus

:enabled

:disabled

 

input[type=checkbox]:checked + div{color:red;}

:input 태그의 type 속성값이 checkbox인 태그가 체크되었을 때 바로 뒤에 위치하는 div태그에 color 적용

 

 

 

 

 

728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

'Dev > HTML5 CSS3' 카테고리의 다른 글

[코코아톡] 챌린지 5일차 / position, pseudo selectors  (0) 2022.02.18
[코코아톡] 챌린지 4일차 / inline, block, flex, collapsing margins  (0) 2022.02.17
[코코아톡] 챌린지 3일차 / meta, label, input, semantic HTML  (0) 2022.02.17
[코코아톡] 챌린지 1일차 / HTML 공부 중!  (0) 2022.02.14
[코코아톡] 노마드코더 클론코딩 신청!  (0) 2022.02.14

티스토리툴바