분류 전체보기 (70) 썸네일형 리스트형 하이퍼 링크 관련 태그 하이퍼 링크 관련 태그 : a (anchor) 태그- a 태그는 현재 HTML 문서와 다른 HTML 문서를 연결해서 페이지 이동을 할 수 있게 하는 기능을 제공 → 이 때, a 태그로 감싸진 문자열 == 하이퍼 링크a 태그를 이용한 하이퍼 링크 구현 글자 관련 태그 목록 관련 태그 네이버로 이동 이미지 클릭 시 페이지 이동">한 페이지 내에서 점프하기 고양이 1 고양이 2 고양이 3 고양이 1 목록으로 이동 고양이 2 목록으로 이동 고.. 이미지 관련 태그 img 태그- 웹 문서에 사진이나 그림 같은 이미지를 삽입하는 용도의 태그- 속성1) src : 삽입할 이미지의 경로를 지정하는 속성 (파일경로, 웹 주소)2) width / height : 이미지의 크기를 지정하는 속성3) alt : 이미지를 설명하는 속성 → 이미지가 출력되지 않는 경우, 화면에 직접 표시(+ 웹 접근성 향상)src 속성 확인- 상대 경로 : 현재 위치를 기준으로 경로를 지정- .. : 상위 폴더- / : 하위, 아래, 안쪽, 안에width, height 속성을 이용한 크기 조절(고정 / 가변 크기)- 고정 크기 단위(px) : 화면의 크기 상관 없이 지정된 값의 크기를 갖는 단위 - 가변 크기 단위(%) : 화면이나 영역 기준 사이즈 크기에 따.. ★★ 영역 관련 태그 ★★ 영역 관련 태그 실습을 위한 style 지정 영역을 나누는 형식(성질)1) block 형식: 공간을 수직 분할 → 수직으로 되어 있는 화면을 가로로 잘라서 여러 행을 만드는 것: 크기를 지정하는 width, height 속성 사용 가능ex) p / pre : 문단 나누기, h1 ~ h6 : 제목 영역 나누기, hr : 수평선을 넣어서 화면 나누기, div : 영역 나누기2) inline 형식: 공간을 수평 분할 → 수평으로 되어 있는 화면을 세로로 잘라서 여러 열(컬럼)을 만드는 것: 크기를 지정하는 width, height 속성을 사용할 수 없음ex) strong / b : 글자 굵게, em / i : 글자 기울기, mark : 글자에 배경색, span : 한 줄을 나누는 용도.. 글꼴 폰트 관련 스타일 ▶ 글꼴 폰트 관련 스타일font-size- 글꼴의 크기를 지정하는 속성- px : 픽셀(화면 해상도) / pt : 포인트(1pt = 0.72인치) / % : 상위 요소 크기에 대한 백분율 / em : 1em = 100% 픽셀(px) 포인트(pt) 퍼센트(%) em #size-test>li:nth-child(1){font-size: 15px;}#size-test>li:nth-child(2){font-size: 25pt;}#size-test>li:nth-child(3){font-size: 130%;}#size-test>li:nth-child(4){font-size: 2em;}/* 크롬 브라우저 기준 기본 글꼴 크기 : 16px */f.. 글자 관련 스타일 ▶ 글자 관련 스타일color - 글자 색을 지정하는 속성- 선택자{ color : 색상명(영문) | 16진수 숫자 | rgb | rgba | hsl | hsla}※ rgba에서 a는 투명도(0: 투명, 1: 불투명) / hsl(색조, 채도, 밝기) / 6개의 색상 지정 방법은 색과 관련된 모든 CSS 속성에서 사용 가능 색상명으로 지정 16진수 rgb로 지정 rgb로 지정 rgba로 지정 hsl로 지정 hsla로 지정 /* color 속성 */#color-ul>li{ font-size: 24px; font-weight: bold;}#color-ul>li:first-child{color: red;}#c.. flex 스타일 3 item 전용 속성- order : item의 순서를 지정하는 속성 item1 item2 item3 item4 item5.flex-container{ height: 400px; background-color: #ddd; display: flex;}/* ************** *//* order *//* ************** *//* flex-container 내부 item의 순서를 지정하는 속성 (기본값 0, 정수, 양수/음수 가능)*/.order1{order: 5}.order2{order: 3}.order3{order: 4}.order4{order: 2}.order5{order: 1}flex-gr.. flex 스타일 2 flex-wrap: wrap | wrap-reverse; 배치 방법flex 실습을 위한 CSS 스타일 설정.flex-container{ height: 75vh; /* 현재 화면의 75%만큼의 비율 */ /* vh : Viewport Height (현재 화면 높이) Viewport : 브라우저 또는 기기 화면 */ background-color: #eee; display: flex; flex-wrap : wrap;flex-wrap : wrap | wrap-reverse; 배치 방법 (div.item.item${item$}*9)*2 --> item1 item2 item3 item4 item5.. flex 스타일 1 flex 실습을 위한 기본 CSS Style 설정div{ border: 1px solid black; box-sizing: border-box; /* content + padding + border 합으로 width/height 지정 */}.item{ width: 75px; height: 75px;}.item1{ background-color: red; }.item2{ background-color: orangered; }.item3{ background-color: orange; }.item4{ background-color: yellow; }.item5{ background-color: yellowgreen; }.item6{ background-color: green; }... 이전 1 ··· 3 4 5 6 7 8 9 다음