Recent Posts
Link
250x250
오늘보다 더 나은 내일의 나에게_
비전공자의 IoT 국비 교육 수강일지 Day_26 본문
728x90
이미지 태그
: 웹 페이지에 이미지를 보여주는 태그
속성 | 설명 |
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 태그 : 선택 상자를 만드는 태그
CSS(Cascading Style Sheets)
: HTML 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어
HTML : 정보 표현 / CSS : 디자인
=> 유지보수 편의성 + 재사용성
CSS란?
h1(선택자){
color(속성) : red(속성 값);
}
font속성
: 글자의 폰트를 정의하는 속성
font-family | 글꼴 |
font-size | 글씨 크기 |
font-weight | 글시 두께 |
font-style | 글씨 스타일(ex_italic) |
선택자 종류
전체 선택자 : *로 표시되며 웹 문서 모든 요소 선택
타입 선택자 : 요소 이름으로 사용하여 요소 선택
아이디 선택자 : #기호로 표시되며 특정한 요소 선택
- body태그 하나만 존재
- 정의한 후, 한 페이지에서 한 번만 사용
>> 그렇지 않으면 웹 표준 테스트에서 오류
- 한 페이지에 한 번만 들어가는 로고, 상단 메뉴, 하단 정보 등 스타일 정의할 때 사용
*HTML구조의 공간분할을 적용할 때
클래스 선택자 : (마침표). 기호로 표시되며 특정한 요소 선택
- 여러 개의 동시에 적용될 수 있다.
- 몇 번이고 재상용 가능
- 반복적으로 사용되는 스타일
*공통되는 스타일을 적용할 경우
계층 선택자 : 특정 위치의 요소를 계층적 구조로 요소 선택
공백 자손 선택자 > 자식 선택자 + 근접 후행 선택자
(형제 선택자)~ 후행 선택자
728x90
'비전공자의 코딩일지' 카테고리의 다른 글
비전공자의 IoT 국비 교육 수강일지 Day_28 (0) | 2022.01.26 |
---|---|
비전공자의 IoT 국비 교육 수강일지 Day_27 (0) | 2022.01.25 |
비전공자의 IoT 국비 교육 수강일지 Day_25 (0) | 2022.01.21 |
비전공자의 IoT 국비 교육 수강일지 Day_21~24 (0) | 2022.01.20 |
비전공자의 IoT 국비 교육 수강일지 Day_20 (0) | 2022.01.14 |
Comments