[텍스트 관련 요소 태그]
[글자크기 변경]
확대 ctrl+ +
축소 ctrl+ -
[새로만들기]
파일 > 폴더열기 > 오른쪽마우스 > NEW FILE > index.html 작성 > 오른쪽창에 ! 엔터
html lang- " en" > english
viewport : display > 1:1 로 들어가겠다 안들어가면 반응형이 안됨
코딩: <body> ~ <dody>
div : 블럭 사각형이라고 생각하기
인라인 구조 : 텍스트구조
div 구조: 사각형구조
body 안에 div를 넣어줘야함
4개의 div 가 필요함 : 헤더 / 베너 / 컨텐츠 / 푸터
<style> 내부스타일
div 이름정해주기 > 선택자
아이디로 설정
html > id
id = " 000 " > 000 더블클릭에서 복사 붙여넣기
div > # header / w , h , background color 지정 하기
div style 지정하기
현장에서는 div 태그를 생략함
<p> : 문단태그, 단락을 표기함
div 안에 p태그를 사용해야함
p태그 안에 div 사용시 문법에 어긋남
- 웹표준: 문법
- 웹접근성: 사람들이 필요한 정보와 자료를 빨리 찾을 수 있도록 접근성이 용이해야함
중요한 정보를 어디에 배치하느냐가 중요하다
ex) 브랜드의 신제품을 어디에 띄우느냐 > 배너나 팝업창에 띄워야함
<span> 단어를 강조하고 싶을때
<style> span 영역을 추가
글자배경을 넣어줬는데 가독성이 떨어짐
<style> color 추가해서 글자색을 밝게 변경
font-size 변경
**기본 폰트사이즈는 13px
[class 지정]
class : .
id : #
속성이 따로 지정될 시 class 로 변경가능함
span 생략 가능
[문자태그사용하기]
<em> 태그: italic체
<strong>태그: 폰트 강하게
<b>태그 : bold체
<mark>태그: 형광펜
<p>COPYRIGHTD ⓒ ©</p>
NTT문자: ©
: 스페이스바 , 공백주기
· : 가운데 점
[리스트 목록 만들기]
<h>태그 : 제목
<li>태그: 리스트
<style> 태그 추가 해서 글자 스타일 변경
hover: 마우스 올릴 시
color: 마우스 올릴 시 글자색 변경
background-color: 마우스 올릴 시 글자배경 색 변경
UX: 사용자가 공부를 하지 않아도 직관적으로 사용방법을 알 수 있음
UI: 이러한 사용자 경험을 바탕으로 디자인
[a 태그 사용하기]
다른 창으로 이동하는 링크
href="#" > # 부분에 링크 주소를 넣어줘야 주소로 이동하게 됨
창 그대로 열렸는지? 새로운 창이 열렸는지 ??
링크를 열어줄 때 새로운 창을 열어주고 싶다면?
target="_blank" 를 추가하면 새로운 창으로 열림
'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| 비주얼 스튜디오 코드③ 테이블 (0) | 2023.05.17 |
|---|---|
| [포토샵] 머리카락 누끼따기 , 아트보드 활용 (1) | 2023.05.17 |
| 비주얼 스튜디오 코드②_이미지넣기_백그라운드 이용 (0) | 2023.05.16 |
| [포토샵]그라디언트, 사진 합성하기 (0) | 2023.05.16 |
| 웹 디자인 header.html (0) | 2023.05.15 |