day3

상은👸·2023년 10월 10일

뚜벅뚜벅 두번째

목록 보기

11/13

📌정리

<p></p> => 위아래로 줄바꿈효과 // block 한줄공간 다 차지

<q></q> => 문장단위인용(짧은) // inline 기본텍스트

<ul></ul> => unorder // <li></li> // ● ● ● 으로 목록 정리
<ol></ol> => order // <li></li> // 1.2.3. 으로 목록 정리
<dl></dl> =>     // <dt></dt><dd></dd> // 중식-짜장면,짬뽕 분식-떡볶이,순대 로 목록정리

<a></a> => 링크 연결
// href 속성 : 연결할 사이트 
// target 속성 : _blank(새탭에 띄우기) _self(현재페이지에 띄우기)
// title 속성 : 마우스 올려놨을때 정보가 뜨는
ex) <a href="https://comic.naver.com/index" target="_blank" title="네이버 웹툰으로...">

<img></img> => 이미지 띄우기
//src 속성 : 이미지 경로
(//alt 속성 : 이미지 설명 글씨)
ex) <img src="images/imgtest.jpg" alt="다운받은이미지">

<dive></dive> => 그룹 구분하기 // block 한줄공간 다차지
<span></span> => 그룹 구분하기 // inline 기본 텍스트

<strong></strong> => 진하게
<em></em> => 기울이기

💡
<form></form> => 입력양식
<label>제목</label> => 제목 클릭해도 창에 클릭한 효과 
<input> 
//type 속성 : text,password,checkbox,radio ....로 구분

💡
<fieldset></fieldset> => 창이 창을 감싸고 있는
<legend>ㅇㅇㅇ</legend> => 감싸고 있는 창 제목 ㅇㅇㅇ 
<textarea></textarea> => 여러줄 쓸 수있는 텍스트 창

💡
<select></select> => select박스(위아래로 좌르륵 나오는창)
<option>
//value 속성 : 사용자한테 보이는 창 말고 서버에 저장되는 값 

💡
<select></select> => select박스(위아래로 좌르륵 나오는창)
<optgroup></optgroup> => 좌르륵 나오는 창 소제목
<option>
//value 속성 


select 박스 기능!
1. disabled : 비활성화
✔️2. selected : select박스에서 초기 선택값
(3. size : 박스 길이)
(4. multiple : 드래그해서 여러개 선택 가능)

기타 옵션들!
1. disabled : 비활성화
2. readonly : 사용자가 쓰지못하게 하는
3. maxlength : 최대로 쓸 수있는 숫자갯수
✔️4. checked : checkbox,radio에서 초기값으로 체크되서 나오는
5. placeholder : 연한회색으로 창에 아이디를 입력하세요. 아이디치면 사라지는 (힌트)
✔️6. value : 초기값설정, 지우고 다시 쓰는

=============================================================
<table></table> => 테이블 만들기
<tr></tr> => 행
<th></th> => 열 (헤더) : 진하게
<td></td> => 열
//rowspan 속성 : 행 병합
//colspan 속성 : 열 병합

<table>
	<tr> <!--1행-->
    	<th>번호</th> <!--1행 1열-->
        <th>상품명</th> <!--1행 2열-->
        <th>수량</th> <!--1행 3열-->
        <th>가격</th> <!--1행 4열-->
   </tr>
        
   <tr> <!--2행-->
        <td>1.</td> <!--1행의 열은 th 2행의 열부터는 td-->
        <td>콜라</td>
        <td>3개</td>
        <td>1200</td>
   </tr>
</table>

============================================================

<a></a> => 링크 연결
// href 속성 : 연결할 사이트 
// target 속성 : _blank(새탭에 띄우기) _self(현재페이지에 띄우기)
// title 속성 : 마우스 올려놨을때 정보가 뜨는
ex) <a href="https://comic.naver.com/index" target="_blank" title="네이버 웹툰으로...">

<img></img> => 이미지 띄우기
//src 속성 : 이미지 경로
(//alt 속성 : 이미지 설명 글씨)
ex) <img src="images/imgtest.jpg" alt="다운받은이미지"

<audio></audio> => 오디오
<video></video> => 비디오
//src 속성 : 경로
//controls : 화면에 띄우게 하는
//autoplay : 자동재생 (혼자만 쓰면 작동안됨)
//muted : 음소거
//loop : 반복재생

( <source>
//src 속성 : 경로
//type 속성 : mp3,wav,ogg => 사이트마다 지원하는 형식 다름! 근데 크롬은 다 지원해준다! )

=============================================================

🔊CSS -> 내부스타일, 외부스타일, 인라인스타일

🍖내부스타일 : <head></head> 안에 <style></style>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <!-- CSS : 내부 스타일 -->
    <style>
        h1 {
            color : red;
        }

        h2 {
            color : blue;         
        }
    </style>
</head>

🍖외부스타일 : 별도의 파일명.css 파일만들고 적용

<head></head> 안에
<link href="./css02_2.css" rel="stylesheet">

🍖인라인스타일 : 태그에 직접 스타일 걸기 -> 제일직접적! 강력!

<h1 style="color: coral;">CSS : Cascading Style Sheet</h1>

=============================================================

link인 경우 : href
link가 아닌 경우(이미지,비디오) : src
href => a(링크연결), CSS(link href / 외부스타일)

=============================================================

📖CSS 적용순서

1. 내부,외부,인라인

=>인라인이 가장 강력!
내부,외부는 순서대로 쓰이는 데로 적용된다

2. 선택자

1) 전체 선택자 : *

* {     /* 1.  전체선택자 : * */
	color: red;
}

2) 태그 선택자 : 태그명

h1 {    /* 2. 태그선택자 : 태그명으로 선택*/
	color: blue;
}

=> 태그선택자가 더 강력
=> 태그선택자가 있어도 class로 지정해준 선택자가 더 강력
=> 결론 : 상세하게 선택해주는게 제일 강력!

3) 클래스 선택자 : .클래스명

.purpleText {
	color: purple;
}

.ylwText {
	color: yellow;
}

=> 태그에 클래스 두개가 같이 나와있으면 head에 있는 클래스중 제일 마지막에 있는 클래스로 적용 (ylwText로 적용)

4) 아이디 선택자 : #아이디명

#brownText {
	color: brown;
}

=> 태그에 class와 id 같이 있으면 id 적용!

5) 속성 선택자 : 속성 + 값으로 선택

1) 해당 속성이 있는가 -> 대상[속성명]
2) 해당 속성에 특정 값이 있는가 -> 대상[속성명="속성값"]

a[target] {
	color: olive;
}
        
a[target="_self"] {
	color: green;
}

3. 선택자 조합해서 사용하기!

<body>
  <div>
        <p id="pid">p태그</p>
        <span class="spancls">span태그</span>
        <a class="acls">a태그</a>
    </div>

    <div class="group1">
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <span>span1</span>
        <span>span2</span>
        <div class="group2">
            <p>p4</p>
            <p id="tgt">p5</p>
            <span>span3</span>
            <span>span4</span>
        </div>
  </div>
</body>

1) 그룹 선택 : , 로 구분

p, span, a {
	color: red;
}

=> 다 빨간색

2) 자식 선택 : > 로 선택

group2 클래스 자식 중 p 태그

.group2 > p { 
	color: red;
}

=> 클래스 선택자는 .클래스명 으로!!
=> 💻
p4, p5 빨간색

3) 자손 선택 : 띄어쓰기로 선택 (하위범위 자식 + 자손들 => 몽땅 다!)

group1에 있는 모든 p

.group1 p {
	color: red; 
}

=> p1, p2, p3, p4, p5 빨간색

4) 인접 형제 선택 : + 로 선택 (바로 붙어있는 하나의 형제)

p태그의 바로 붙어있는 하나의 형제 span태그 선택

p + span {
	color: blue;
}

=> 💻
span태그, span1, span3 파란색

5) 형제 선택 : ~ 로 선택 (모든 형제)

p태그의 모든 형제 span태그 선택

p ~ span {
	color: green;
}

=> 💻
span태그, span1, span2, span3, span4 초록색

4. 가상 선택자

<body>
    <p id="tgt">타겟 요소</p>
    <a href="http://naver.com" target="_blank">네이버 이동 링크</a>
    <a href="http://instagram.com" target="_blank">인스타그램 이동 링크</a>

    <button>눌러봐</button>
    <button disabled>눌러봐</button>

    <form>
        <input type="checkbox" class="chb">
        <span>체크해봐라</span>
        
        <input type="text" value="teeidsoa">
    </form>
</body>

1) 가상 요소 선택

선택한요소::before => 선택한요소의 앞에
선택한요소::after => 선택한요소의 뒤에
content: 내용

#tgt::before {
	content: "tgt앞에";
	color: red;
}

#tgt::after {
	content: "tgt뒤에";
	color: blue;
}

=> 💻
tgt앞에타겟 요소tgt뒤에

2) 가상클래스 선택

:link => 링크 방문한적 없을 경우 (a 태그)
:visited => 링크 방문한 경우 (a 태그)

:hover => 마우스 올리면
:active => 마우스 눌렀을때 (가장 마지막에 나와야한다!)

:focus => 요소가 활성화 된 경우
:checked => 체크박스가 체크 된 경우
:disabled => 비활성화 된 경우
:enabled => 활성화 된 경우

① :link => 링크 방문한적 없을 경우 (a 태그)
② :visited => 링크 방문한 경우 (a 태그)

a:link {
	color: deeppink;
}

=> 💻
네이버 이동링크 인스타그램 이동링크 (링크 방문하지 않은곳은 deeppink로 되고 방문했던 곳은 mediumseagreen이 되고)

a:visited {
	color: mediumseagreen;
}

=> 💻
네이버 이동링크 인스타그램 이동링크 (링크 방문하지 않은곳은 deeppink로 되고 방문했던 곳은 mediumseagreen이 되고)

③ :hover => 마우스 올리면
④ :active => 마우스 눌렀을때

a:hover { 
	color: red;
}

=> 💻
네이버 이동링크 인스타그램 이동링크 (마우스 올렸을때 red 클릭했을때 blue)

a:active {
	color: blue;
}

=> 💻
네이버 이동링크 인스타그램 이동링크 (마우스 올렸을때 red 클릭했을때 blue)

⑤ :focus => 요소가 활성화 된 경우
⑥ :checked => 체크박스가 체크 된 경우
⑦ :disabled => 비활성화 된 경우
⑧ :enabled => 활성화 된 경우

.chb:checked + span { /*chb의 인접형제인 span*/
	color: red;
}

=> 💻
ㅁ 체크해봐라 (체크할 때 체크해봐라 글씨색상이 red로 됨)


button:enabled {
	color: green;
}

=> 💻
눌러봐 (눌러봐버튼의 글씨색상이 green)

button:disabled {
	color: gray;
}

=> 💻
눌러봐 (눌러봐버튼의 글씨색상이 gray)

button:active { /*이게 enabled 위에있으면 안먹혀.. 누르는게 발생했을때 색을 입히는것! active가 젤뒤에 와야한다*/
	color: red;
}

=> 💻
눌러봐 ( 눌렀을때!!!!!! 눌러봐버튼의 글씨색상이 red)

input[type="text"]:focus {
	color: blue;
}

=>속성[속성값]:focus

=> 💻
ㅁ텍스트창 안에 teeidsoa 있는 상태 (텍스트창 안에 커서 놓았을때 글씨색상이 blue로 변함)

5. 구조적 가상 클래스 선택자

<div class="pbox">
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>p5</p>
    <p>p6</p>
</div>
    
<div>
	<p>p1</p>
    <span>s1</span>
    <p>p2</p>
    <span>s2</span>
    <p>p3</p>
    <p>p4</p>
</div>

<div>
    <p>p1</p>
    <span>s1</span>
    <span>s2</span>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
</div>

자식태그:first-child 첫번째 자식
자식태그:last-child 마지막 자식
자식태그:nth-child(n) n번째 자식
자식태그:nth-last-child(n) 끝에서 n번째 자식

자식태그:first-of-type 첫번째 자식 (특정 타입)
자식태그:last-of-type 마지막 자식 (특정 타입)
자식태그:nth-of-type(n) n번째 자식 (특정 타입)
자식태그:nth-last-of-type(n) n번째 자식 (특정 타입)

p:first-child {
	color: red;
}

=> 💻
p1, p1, p1 (p태그 중 첫번째 자식만 red!)

p:last-child {
	color: blue;
}

=> 💻
p6, p4, p4 (p태그 중 마지막 자식만 blue!)

p:nth-child(3) {
	color: green;
}

=> 💻
p3, p2 (3번째 자식들만인데, p태그인것만 가져온다! 따라서 s2는 span태그라서 X)

p:nth-of-type(3) {
	color: blue;
}

=> 💻
p3, p3, p3 (p태그들 중에서만!! 3번째 자식)

.pbox p:nth-of-type(even) {
	color: red;
}

=> 💻
p2, p4, p6 (클래스pbox 의 자손들 다 나와 그리고 even이면 짝수만!) // 짝수 : 2n, even

.pbox p:nth-of-type(odd) {
	color: blue;
}

=> 💻
p1, p3, p5 (클래스pbox 의 자손들 다 나와 그리고 odd이면 홀수만!) // 홀수 : 2n+1, odd

span.tgt {
	color: green;
}

=> 💻
span태그 대상 (span태그의 클래스tgt인 놈!)

🚨
span .tgt : span태그 자손들중에 클래스tgt
span, .tgt : span태그 와 클래스tgt
span.tgt : span태그의 클래스tgt인 놈

상은👸

뒤죽박죽 벨로그

이전 포스트

day4

다음 포스트