NAMU DAYS

STUDY/HTML & CSS

UI / UX 웹 퍼블리셔 & 프론트엔드 [16] - background-image [CSS2.0]

이번 실습은 비교적 간단한? 실습이다. 검색 창하면 떠오르는 사이트 중 네이버의 검색창의 이미지를 따서 만들어보았다. ○ BODY 객체 .search : 검색창 이미지를 씌우기 위한 틀 : 검색창에 입력할 부분을 만들기 위한 객체 ○ HEAD .search { background-image: url("./search.png"); } : 상대 경로를 이용해 배경으로 사용할 네이버 검색창 이미지를 가지고 온다. .search_text { border: 0; font-size: 17px; } : 깔끔한 검색창 입력 부분을 만들기 위해 테두리를 제거하고 폰트의 크기를 설정한다.

STUDY/HTML & CSS

UI / UX 웹 퍼블리셔 & 프론트엔드 [8] - CSS 1.0

HTML과 항상 붙어다니는 단짝 친구 CSS 1.0을 다루는 실습이다. style="" 속성 : 멋이라곤 하나도 모르는 HTML을 위해 발 벗고 나선 CSS의 첫 등장 버전이다. ** width : 객체의 가로 크기 지정 (px, em, %, vh, vw 등) ** height : 객체의 세로 크기 지정 (px, em, %, vh, vw 등) ** background-color : 객체의 배경색 지정 (색상 단어 & 해쉬 코드) ** border-color : 객체의 테두리 색상 지정 (색상 단어 & 해쉬 코드) ** color : 객체의 폰트 색상 지정 (색상 단어, 해쉬 코드) ** font-size : 객체의 폰트 크기 지정 (px, em, %, vh, vw 등)