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 웹 퍼블리셔 & 프론트엔드 [13] - 기본 레이아웃 종합[CSS2.0]

이번 실습은 저번까지 했었던 기본 레이아웃 실습을 종합 정리하는 실습이다. ○ 객체 [100 * 100 / 파란 배경 / 내부 여백 50 0 0 50] : padding을 활용하여 사이즈가 늘어나는 것을 항상 유의한다! → 150 * 150 [65 * 65 / 녹색 배경 / 내부 여백 35 0 0 35] : padding을 활용하여 사이즈가 늘어나고[100 * 100], c의 위치에 영향을 준다. 객체 .c [30 * 30 / 노란 배경 / b의 div 요소] : 처음 생성 위치는 margin : 0;으로 왼쪽 구석이지만, b의 padding: 35px 0 0 35px;을 통해 c 객체는 오른쪽 아래쪽으로 35px 0 0 35px만큼 밀린다. [50*50 / 회색 배경 / 내부 여백 150 0 0 150..

STUDY/HTML & CSS

UI / UX 웹 퍼블리셔 & 프론트엔드 [12] - margin & padding

이번에도 여전히- CSS2.0 실습을 진행하였다. 이번에 학습할 margin과 padding은, 앞으로도 계속 중요하게 사용할 태그이기 때문에 똥꼬에 빡 집중하고 공부했다. ★ margin & padding * margin : 외부 여백을 뜻하며, 간격을 주고 싶을 때 사용한다. * padding : 내부 여백을 뜻하며, 객체와 내용 사이의 간격을 줄 때 사용 → 내부에 여백을 주며 객체의 크기가 여백만큼 증가하기 때문에 이에 유의해서 사용할 것! ** margin / padding - 방향 : 크기; : margin과 padding에 방향성을 부여하는 기능이다. 각각 -top, -right, -bottom, -left를 부여할 수 있다. ex) margin-left: 500px; = 왼쪽 외부 여백을 ..