day2

상은👸·2023년 10월 9일

뚜벅뚜벅 두번째

목록 보기

12/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태그

1.행 : tr 태그

2. 열+헤더(진하게) : th 태그

3. 열 : td 태그

//3행 3열 테이블
<table>
  <tr> //1행
  	<th></th> //1행 1열
    <th></th> //1행 2열
    <th></th> //1행 3열
  </tr>
  
  <tr> //2행
  	<td></td>
    <td></td>
    <td></td>
  </tr>
  
  <tr> //3행
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

행 병합 : rowspan 속성

=> 위에서부터 합친다!

열 병합 : colspan 속성

=> 앞에서부터 합친다!

※그룹지어주기※

thead 태그
tbody 태그
tfoot 태그 => thead tbody 앞에서 지정해줬으면 얜 안적어도 tfoot 알아서 지정된다!

//3행 3열 테이블
<table>
	<thead>
      <tr> //1행
        <th></th> //1행 1열
        <th></th> //1행 2열
        <th></th> //1행 3열
      </tr>
 	</thead>
    
     <tfoot> //=> 위치가 여기여도 표상으로는 끝에 위치한다!
      <tr> //3행
        <td></td>
        <td></td>
        <td></td>
      </tr>
	</tfoot>

    <tbody>
       <tr> //2행
         <td></td>
         <td></td>
         <td></td>
       </tr>
	</tbody>
    
</table>

※헤더의 범위 지정※ => 진하게 표시된 부분 지정

scope 속성 = row 속성값
scope 속성 = col 속성값

//3행 3열 테이블
<table>
	<thead>
      <tr> //1행
        <th scope="col"></th> //1행 1열
        <th scope="col"></th> //1행 2열
        <th scope="col"></th> //1행 3열
      </tr>
 	</thead>
    
     <tfoot> //=> 위치가 여기여도 표상으로는 끝에 위치한다!
      <tr> //3행
        <td></td>
        <td></td>
        <td></td>
      </tr>
	</tfoot>

    <tbody>
       <tr> //2행
         <td></td>
         <td></td>
         <td></td>
       </tr>
	</tbody>
    
</table>

📖 미디어 처리 => 오디오,비디오

1. 오디오

<audio></audio>
//src 속성 : 오디오 파일 경로
//control 속성 : 화면에 나타나게 하는
//autoplay 속성 : 자동재생(혼자만 쓰면 작동안됨)
//muted 속성 : 음소거
//loop 속성 : 반복재생

2. 비디오

<vidio></vidio>
//src 속성 : 오디오 파일 경로
//control 속성 : 화면에 나타나게 하는
//autoplay 속성 : 자동재생(혼자만 쓰면 작동안됨)
//muted 속성 : 음소거
//loop 속성 : 반복재생

🔊 유튜브 영상 가져오려면

유튜브 영상 재생눌러서 오른쪽마우스 누르면 소스코드 복사하기 있어 그거 복사해서 vscode에 붙여넣기하면 화면에 뜬다

📖 시맨틱웹

header 태그 : 헤더 영역
nav 태그 : 네비게이션 영역
section 태그 : 내용별로 구분짓는 영역
article 태그 : 기사부분 특정내용
aside 태그 : 옆 부분
footer 태그 : 아래 부분(끝)
main 태그 : 중요한 몸통 역할

영역/구조/구성 구분 -> div 태그

<div></div> //이 div 영역은 header 역할
<div> //이 div 영역은 main 역할
  <div></div>
  <div></div>
</div>

div로 구분을 지은 다음 어느영역에 해당하는지 정해주고 작성하면 된다!

📖속성 attribute

공통(글로벌) 속성

★class : 식별자 (n개 여러개)
★id : 식별자 (1개 고유한)
style : 꾸미기
title : 추가 정보/설명 ->주로 쓰는애들한테만 쓴다
★hidden : 숨길때
data-* : 임의의 사용자 정보 속성

📖CSS 맛보기

CSS : Cascading Style Sheet
꾸미기에 관련된 코드!

📣CSS 적용 방식

내부 스타일 : html 파일 내부 head 부분에

<head>
<style>
    h1 {
    	color : red;
    }
</style>
</head>

외부 스타일 : 외부에 파일명.css 파일을 별도로 만드는 방식

인라인 스타일 : 태그에 직접 스타일 걸기

📣CSS 작성 문법 구조

선택자 : 누구를 대상으로 => ex) h1
선언부 (스타일 작성) => ex) {color : red;}

상은👸

뒤죽박죽 벨로그

이전 포스트

day3

다음 포스트