tip. VSCode에서 shift + alt + f 단축키를 사용하면 자동정렬이 된다
HTML
- <h1></h1>, <h2></h2>, …, <h6></h6>: 제목 태그
- <hr>: 선
- <br>: 엔터
- : 한 칸 띄어쓰기
- <b></b>: bold 태그
- <i></i>: italic 태그(기울이기)
- <p></p>: paragraph 태그(단락)
- <a></a>: 하이퍼링크 태그
href="링크"
target="링크 여는 방법"
> _self: 현재 페이지(기본값)
> _blank: 새 탭<img src=" ">: 이미지 태그
list
<ol></ol>: ordered list 태그(순서가 지정된 리스트)
<ol type=" ">으로 1, A, a, i, I 등 타입 지정 가능
<ul></ul>: unordered list 태그(순서가 지정되지 않은 리스트)
<ul type=" ">으로 none, circle, square 등 타입 지정 가능
<li>list item 태그<li>: list 태그 내에 사용
table
<table>table 태그</table>
border 속성으로 테두리
width, height 속성으로 크기 조정 가능
<tr></tr>: row; 가로(표에서의 가로 한 줄)
<td></td>: table data(표 한 칸)
<td colspan=" "> (가로로 몇 칸을 차지할지)
혹은 <td rowspan=" ">(세로로 몇 칸을 차지할지)으로 칸의 비율을 조정할 수 있다
<th></th>: table head 태그(bold, 가운데정렬이 자동으로 된다, 헤더 셀을 정의할 때 사용)
블록 태그 vs 인라인 태그
블록 태그: 한 줄을 모두 차지 (ex. <div>, <h1>…)
인라인 태그: 글자가 차지하는 공간만큼만 차지 (ex. <span>…)
+ 데이터 전송 시
GET: 보안 X, 검색 시 파일명?aa=wer&bb=sdfe 방식으로 주소창에 뜬다
POST: 보안이 요구될 때 사용
<form action="a.html" method="post">
위와 같은 방식으로 전송 방식 설정 가능
CSS
스타일을 지정하는 방법 (숫자는 적용 우선순위와 동일함)
1. Inline CSS
body 태그 내에서 스타일 지정을 원하는 태그 내에 style 속성을 준다
<body>
<h1 style = "color = red">제목</h1>
</body>
2. Internal CSS
head 태그 내 style 태그 안에 사용할 스타일을 지정해둔다
<head>
<style>
h1{color = red;}
</style>
</head>기본적으로 <head> 태그 속 <style> 태그 안에 정의
- 선택자{속성:값;} → 사용 시 별다른 지정 X
- .클래스명{속성:값;} → <h1 class = "클래스명">
- #id명{속성:값;} → <h1 id = "id명">
+) 모든 태그에 적용하고 싶으면 선택자 부분에 * 기호를 넣으면 된다
3. External CSS
따로 css 파일을 만들어, Internal CSS 방식에서 style 태그 안에 작성 가능했던 내용들을 css 파일에 작성한다
그리고 head 태그 속에 link 태그를 만들어 해당 css 파일을 연결해준다
<head>
<link rel="stylesheet" href="css파일경로">
</head>* 상대경로로 파일을 지정할 경우, 현재 파일 위치의 부모 파일 위치로 올라가려면 ../ 을 붙여주면 된다
후손 & 자손 태그에 스타일 적용하기
후손: 자신의 하위 경로에 위치하는 모든 태그들 (공백으로 표현)
자손: 자신의 바로 하위 경로에 위치하는 태그들 ( > 로 표현)
#header h1 {color: red;} /* id 속성 값으로 header를 가지는 태그의 후손 태그들에 스타일 적용 */
#header > h1 {color: red;} /* id 속성 값으로 header를 가지는 태그의 자손 태그들에만 스타일 적용 */
그 외 스타일 속성 예시
/*input 중 type 속성을 text로 가지는 태그의 background 속성에 yellow 키워드를 적용
단, input과 [ ] 사이에 공백을 넣으면 후손 선택자와 혼동이 발생하므로 붙여서 쓸 것*/
input[type = text] {background: yellow;}
/*input 요소를 클릭해서 포커스할 경우 배경색을 green 변경*/
input:focus {background-color: green;}
/*h1 요소에 커서를 올려두었을 경우 글자색을 blue로 변경*/
h1:hover {color: blue;}
/*h1 요소를 클릭하고 있는 경우 글자색을 orange 변경*/
h1:active {color: orange}제목
위는 해당 css 코드를 적용한 예시
리스트 태그 스타일 속성
/*li의 첫번째 태그에 스타일을 적용*/
li:first-child{color:red;}
/*li의 마지막 태그에 스타일을 적용*/
li:last-child{color:blue;}
/*li의 ( )에 해당되는 순번의 태그에 스타일을 적용
ex. 2n → 2, 4, 6번째 태그에 적용, 2n+1 → 1, 3, 5, 6번째 태그에 적용*/
li:nth-child(3n){color: blueviolet;}
href 태그 스타일 속성
/*a태그에서 link가 걸린 텍스트의 색을 orange로 설정*/
a:link{color:orange}
/*a태그에서 이미 방문한 페이지에 링크를 걸고 있는 텍스트의 색을 yellow로 설정*/
a:visited{color: yellow;}
/*a태그에서 text-decoration 속성을 none으로 변경(기본값이었던 밑줄이 사라진다)*/
a{text-decoration: none;}'Programing > Front(HTML, CSS, JS)' 카테고리의 다른 글
| [CSS] input 요소 focus 시 외곽선 스타일 변경이 안 되는 문제 (0) | 2023.12.09 |
|---|---|
| [CSS] 드롭다운 메뉴바 구현하기 (0) | 2023.12.06 |
| [JavaScript / jQuery] 이미지 슬라이더(캐러셀) 구현하기 (0) | 2023.12.03 |
| width: 100% 인데도 가로 스크롤바가 생기는 문제 (0) | 2023.11.28 |
| [HTML / CSS] 회원가입 폼 만들기 (0) | 2023.10.19 |