- [ifp_html_css_study] Orange2022년 06월 02일
- 홍유진
- 작성자
- 2022.06.02.오전03:08
Visual Studio Code 확장 프로그램 설치
- Korean Language Pack for Visual Studio Code
- Live Server
- Material Icon Theme
- Material Theme
- Prettier - Code formatter
- Color Highlight
- Bracket Pair Colorizer
- IntelliSense for CSS class names in HTML
- Visual Studio IntelliCode
- Auto Rename Tag
- HTML Snippets
Orange
[HTML만 완성]
[소스 코드]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="orange.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fruit</title> <style> body { background-image: url(images/orange-bg.jpg); } </style> </head> <body> <div> <img src = 'images/orange.png'> <h1>Orange</h1> <ul> <li><a href = "orange.html" target = "_blank">Orange</a></li> <li><a href = "kiwi.html" target = "_blank">Kiwi</a></li> <li><a href = "strawberry.html" target = "_blank">Strawberry</a></li> </ul> </div> </body> </html>[태그, 속성]
- div : 사이트의 레이아웃(전체적인 틀)을 만들 때 주로 사용
- h : 구획 제목 요소 h1이 가장 높고 h6은 가장 낮다
- ol : 순서가 있는
- ul : 검정 동그라미 (순서가 없는 리스트)
- li : 리스트를 달겠다
- 속성 = target = "_blank” : 현재 브라우저에서 열림
[최종]
div { background-color: white; width: 400px; padding: 30px; /*margin-left:auto; margin-right:auto; margin-top:130px; */ margin: 150px auto; /* 상하 좌우 margin: 130px auto 130px; 상 좌우 하 margin: 130px auto 130px auto; 상 우 하 좌 */ border: 10px orange solid; border-radius: 30px; } h1 { color: orange; width: 120px; margin: 20px auto; border-bottom: 5px orange solid; } ul { width: 100px; margin: 0 auto; } a{ color: black; text-decoration: none; } a:hover { color: orange; }'Web Frontend > HTML_CSS' 카테고리의 다른 글
[ifp_html_css] CSS diner 01 ~ 10 (0) 2022.06.03 [ifp_css_html] 나누기 (0) 2022.06.03 [ifp_html_css] 할로윈 (0) 2022.06.03 [ifp_html_css] Statue (0) 2022.06.02 [ifp_html_css] Kiwi & Strawberry (0) 2022.06.02 다음글이전글이전 글이 없습니다.댓글
스킨 업데이트 안내
현재 이용하고 계신 스킨의 버전보다 더 높은 최신 버전이 감지 되었습니다. 최신버전 스킨 파일을 다운로드 받을 수 있는 페이지로 이동하시겠습니까?
("아니오" 를 선택할 시 30일 동안 최신 버전이 감지되어도 모달 창이 표시되지 않습니다.)