비전공자의 IoT 국비 교육 수강일지 Day_26

이미지 태그

: 웹 페이지에 이미지를 보여주는 태그

 

속성	설명
src	이미지의 경로 지정(파일 경로나 URL)
alt	이미지에 대한 설명 (경로가 잘못되었을 경우)
border	이미지 주위의 테두리
height	이미지의 높이
width	이미지의 너비
hspace	좌우 여백
vspace	상하 여백

 

경로

절대 경로 
: 어떤 페이지나 파일이 가진 고유한 경로 (*외부 웹페이지로 연결할 때 사용)

<img src="https://img.hankyung.com/photo/202105/BF.26240930.1.jpg" width="500px">

상대 경로
: 특정 위치를 기준으로 파일을 찾는 경로(*내부 자료를 연결할 때 사용)

<!-- 1) 현재를 기준으로 -->
<img src="./img/img.jpg" width="500px">
<!-- 2) 상위를 기준으로 -->
<img src="../img/img.jpg" width="500px">

. => 현재 html 파일이 소속된 폴더
.. => 현재 html 파일의 부모 폴더
/ => 최상위로 이동
/ => 경로 구분자

 

---

 

앵커태그

<a href="url">텍스트</a>

 

속성	설명
href	hypertext referenece로 연결할 주소 지정
name	문서 내 특정 위치 이동
target	링크된 내용이 열릴 대상 _blank : 링크 클릭 시 새 창 설정 _self : 현재와 동일한 브라우저 창 설정

 

예제

코드

<a href="https://www.smhrd.or.kr/"><img src="./img/KakaoTalk_20220124_104040525.png" width="500px"></a>

 

---

 

테이블 태그

코딩이 아니라 일반적으로 표를 만드는 상황을 기억할 것

1) 나 표 만들어야겠다! 선언
-> <table></table>

2) 몇 줄짜리 만들어줘야겠다!
-> table row -> <tr></tr>

3) 몇 칸을 만들지
-> 표의 header부분? <th></th>
-> 표의 data부분? <td></td>

 

<table>

속성	설명
align	표의 정렬 방식(left, right, center)을 지정
bgcolor	표의 배경색을 지정
border	표의 테두리 두께를 지정
bordercolor	표의 테두리 색 지정
width	표의 너비를 지정
height	표의 높이를 지정

 

<tr>태그</tr>

:table row의 줄임말, 표 내부에서 1줄을 생성하는 태그

속성	설명
align	행 정렬 방식 지정
bgcolor	행 배경색 지정
height	행 높이 지정

 

<th>텍스트</th>

<:행의 head 역할을 하는 태그

 

<td>텍스트</td>

: table data / 칸 안의 데이터를 나타내는 태그

 

속성	설명
align	셀 정렬방식 지정
bgcolor	셀 배경색 지정
colspan	셀 병합(좌우)
rowspan	행 병합(상하)
width	셀 너비 지정
height	셀 높이 지정

 

 

예제

코드

<table border="1px solid black" align="center" width="500px">

    <!-- caption : 표의 제목 -->
    <caption>메뉴판</caption>
    <!-- tr : table row 1줄을 생성하는 방법 -->
    <tr bgcolor="green" height="50px">
        <!-- th : 컬럼의 제목을 작성 -->
        <th>메뉴</th>
        <th>가격</th>
    </tr>
    <tr>
        <td>아이스아메리카노</td>
        <td>3500</td>
    </tr>
    <tr>
        <td>아이스카페라떼</td>
        <td>4500</td>
    </tr>
</table>

---

<table border="1" align="center">
    <caption>스마트인재개발원</caption>
    <tr bgcolor="Bisque">
        <th>이름</th>
        <th>성별</th>
        <th>주소</th>
    </tr>
    <tr>
        <td>선영표</td>
        <td>여자</td>
        <td>광주</td>
    </tr>
    <tr>
        <td>김운비</td>
        <td>여자</td>
        <td>광주</td>
    </tr>
</table>

 

---

 

입력 양식 태그

: 웹 페이지에 입력 폼을 만들 때 사용하는 태그 

 

<form></form>

속성	설명
action	입력 데이터의 전달 위치 지정
method	입력 데이터의 전달 방식 지정(GET/POST)
name	form태그의 이름 지정

 

<input type="text">

:데이터를 입력할 수 있는 태그

속성	설명
name	입력한 값을 구분하기 위한 속성
value	기본 값 지정
placeholder	미리보기 텍스트
autofocus	자동 커서 설정
maxlength	글자 수 제한 지정
readonly	읽기 전용 지정

 

<input type="password"> => 비밀번호입력 타입

<input type="checkbox"> => 단중 선택 가능

<input type="radio"> => 단중 선택 불가능

 

<input type="file">

<input type="color">

<input type="number">

<input type="range">

<input type="date">

<input type="datetime-local">

 

 

select 태그 : 선택 상자를 만드는 태그

select 태그

 

 

---

CSS(Cascading Style Sheets)

: HTML 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어

 

HTML : 정보 표현 / CSS : 디자인

=> 유지보수 편의성 + 재사용성

 

CSS란?

h1(선택자){
       color(속성) : red(속성 값);
}

 

font속성

: 글자의 폰트를 정의하는 속성

font-family	글꼴
font-size	글씨 크기
font-weight	글시 두께
font-style	글씨 스타일(ex_italic)

 

 

선택자 종류

전체 선택자 : *로 표시되며 웹 문서 모든 요소 선택

타입 선택자 : 요소 이름으로 사용하여 요소 선택

아이디 선택자 : #기호로 표시되며 특정한 요소 선택
- body태그 하나만 존재

- 정의한 후, 한 페이지에서 한 번만 사용
>> 그렇지 않으면 웹 표준 테스트에서 오류

- 한 페이지에 한 번만 들어가는 로고, 상단 메뉴, 하단 정보 등 스타일 정의할 때 사용
*HTML구조의 공간분할을 적용할 때


클래스 선택자 : (마침표). 기호로 표시되며 특정한 요소 선택
- 여러 개의 동시에 적용될 수 있다.

- 몇 번이고 재상용 가능

- 반복적으로 사용되는 스타일
*공통되는 스타일을 적용할 경우

계층 선택자 : 특정 위치의 요소를 계층적 구조로 요소 선택

공백	자손 선택자
>	자식 선택자
+	근접 후행 선택자 (형제 선택자)
~	후행 선택자