HTML
# 하이퍼링크 a 태그의 옵션 target의 값 _blank(새 창에서 열기)가 적용되어져 있지 않은 사이트를
링크를 통해 새 창으로 열고 싶을 때는,
command나 ctrl 키를 누르면서 클릭하게 되면 새 창에서 사이트에 연결될(열) 수 있다.
요소(텍스트)를 어떤 요소로 묶어주는(감싸는) 행위를 Wrapping이라고 부른다.
div 태그가 대표적인 block 요소는 가로 사이즈를 가장 넓게 사용하고, 하나에 한 줄씩 적용되기 때문에
요소가 수직으로 쌓이도록 배치되어 출력된다.
span 태그가 대표적인 inline 요소는 가로 사이즈를 최소한으로만 사용하려고 한다.
그래서 글자를 다룰때에는 span 태그와 같은 inline 요소로만 다루어야 한다.
br(break의 약어) 태그는 HTML에서 줄바꿈 효과를 준다.(엔터키는 효과 적용되지 않음)
colspan(Column Span의 약어) 속성은 열을 몇 칸 확장할 것인지를 의미한다.
* 실제 엑셀이나 구글 시트 같은 표(table)가 필요한 경우가 아니라면,
격자무늬의 디자인을 TABLE 요소로 만들려고 시도하지 말고,
그리드(Grid)와 같은 다른 CSS 기능으로 레이아웃을 작업해야 한다.
주석처리
HTML에서 주석처리(<!--내용-->)하고 싶을 때
단축키는 Ctrl + / (Windows에서) 나 Cmd + / (macOS에서)
cf. CSS에서 주석처리는 /* 내용 */ 이런 식으로 작성하고 단축키는 동일
전역 속성 : body에 작성하는 모든 태그에서 사용할 수 있는 속성
1. <태그 title="설명"></태그>
요소의 정보나 설명을 지정
2. <태그 style="스타일"></태그>
요소에 적용할 스타일(CSS)을 지정 cf. CSS 선언 방식은 4가지 : link, <style> 등
3. <태그 class="이름"></태그>
요소를 지칭하는 중복 가능한 이름
4. <태그 id="이름"></태그>
요소를 지칭하는 고유한 이름
5. <태그 data-이름="데이터"></태그>
요소에 데이터를 지정 cf. JavaScript에서 지정한 이름으로 값을 가지고 와 활용할 수 있게 함
SCRIPT 요소에 defer 속성은, HTML 구조가 준비된 후(문서 분석 이후)에
JavaScript를 해석하겠다는 의미이다.
% VS Code 작성하다 전체화면을 전환되었는데,
원 창 크기로 바꾸지 못해 한참 esc도 눌러보고, 작업관리자도 불러보려고 했다.;;
당황하지 말고 간단하게 F11 키로 ^.~
CSS
CSS 선언 방식
1. 내장 방식 : <style></style>의 내용으로 스타일을 작성
HTML <head>에 작성 -> 따로 CSS파일을 만들어 줄 필요없어 편리,
그러나 이러한 CSS 내용이 많아질 경우
HTML 문서 안에서의 처리가 한번에 다 이루어지기 쉽지 않음
, 유지보수 측면에서는 단점이 있음
따라서, CSS 작성 방식으로 추천하지 않음
<style>
div {
color: green;
margin: 30px;
}
</style>
2. 인라인 방식 : 요소의 style 속성(전역 속성)에 직접 스타일을 작성하는 방식
CSS 적용에 있어 인라인 방식이 우선으로 처리되므로,
다른 CSS방식으로 수정하고자 할 때 적용되지 않는 단점이 있음
-> 유지보수 측면에서 단점이 있음
따라서, CSS 작성 방식으로 추천하지 않음
<div style="color: green; margin: 30px;"></div>
3. 링크 방식 : <link />(빈 태그)로 외부 CSS 문서를 가져와서 연결하는 방식
<link rel="stylesheet" href="./css/main.css">
4. @import 방식 : CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식
<link rel="stylesheet" href="./css/main.css">
main.css 파일
@import url("./box.css");
div {
color: green;
margin: 30px;
}
box.css 파일
. box {
background-color: yellow;
padding: 20px;
}
CSS 선택자 기본
1. 전체 선택자(Universal Selector) : 모든 요소를 선택
형식 - *
2. 태그 선택자(Type Selector) : 해당 태그 요소들을 선택
형식 - ABC (태그 이름만)
3. 클래스 선택자(Class Selector) : 작성자가 만든 클래스 속성의 값이 ABC인 요소들 선택
형식 - .ABC (.클래스 이름)
4. 아이디 선택자(ID Selector) : 작성자가 만든 id 속성의 값이 ABC인 요소를 선택
형식 - #ABC (#아이디 이름)
CSS 선택자 복합
1. 일치 선택자(Basic Selector) : 선택자 두 개를 동시에 만족하는 요소들 선택
형식 - ABCXYZ (선택자선택자)
cf. 태그 선택자와 함께 써야한다면,
컴퓨터가 구분할 수 있도록 태그 선택자를 앞에 쓴다.
2. 자식 선택자(Child Combinator) : 선택자 ABC의 자식 요소 XYZ 선택
형식 - ABC > XYZ
3. 하위(후손) 선택자(Descendant Combination) : 선택자 ABC의 하위 요소 XYZ 선택
'띄어쓰기'가 선택자의 기호!
형식 - ABC XYZ
4. 인접 형제 선택자(Adjacent Sibling Combinator) : 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택
형식 - ABC + XYZ
5. 일반 형제 선택자(General Sibling Combinator) : 선택자 ABC의 다음 형제 요소 XYZ 모두를 선택
형식 - ABC ~ XYZ
'컴퓨터 사이언스 > TIL 정리' 카테고리의 다른 글
| JavaScript 끝말잇기 게임 작성하기 (0) | 2022.07.03 |
|---|---|
| [OP] HTML + CSS로 카카오 프로필 페이지 만들기 (0) | 2022.07.02 |
| 나의 첫 Hexo Blog ! (0) | 2022.07.01 |
| MGS day 04 (0) | 2022.06.30 |
| Java (0) | 2022.06.30 |
