NAMU DAYS

STUDY/HTML & CSS

UI / UX 웹 퍼블리셔 & 프론트엔드 [17] - 퀵메뉴 만들기

이번 실습은 주로 네이버나 쇼핑몰을 정리해주는 사이트에서 자주 사용하는 "퀵메뉴" 실습을 진행하였다. ○ BODY 퀵메뉴의 큰 틀을 담당할 객체 .quickmenu 를 추가한 객체 .imgdiv : 퀵메뉴를 구성할 요소들에 상대경로로 이미지를 넣어주고 이미지를 누를 경우 이동할 사이트와 이동할 방식을 을 통해 지정해준다. 그리고, 객체는 세로로 쌓이기 때문에 3개씩 가로로 붙이기 위해 클래스에 별칭을 달아준다. ○ HEAD - .quickmenu 와 .imgdiv 를 통해 각 객체의 크기와 특성을 지정해 주고, 위로 당길 객체들은 별칭을 통해 당겨준다. ※ , 활용하여 적용해보기 를 쓰는 것과 별 차이 없이, 작은 요소 하나하나에 가로길이와 세로길이를 넣어주고 margin으로 잡아당긴다. 나중에는 이렇게..

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 웹 퍼블리셔 & 프론트엔드 [15] - <select> 태그 [CSS 2.0]

CSS 3.0으로 가기 위한 길이 너무나도 멀다. 그러니 나는 꾸준히 똥꼬에 힘주며 공부하고 있으면 된다. ○ BODY 태그 : 웹에서 흔히 볼 수 있는 기능으로, 쇼핑몰과 같은 사이트에서 클릭 시 옵션을 선택할 수 있는 SelectBox를 만드는 기능이다. 는 하나 이상의 이 꼭 존재해야 한다. ① text과 같은 input 타입에 최대 글자 수 제한을 거는 기능이다. ex) 아이디 or 비밀번호 글자 수 제한 ② text과 같은 input 타입에 입력할 정보에 대한 힌트를 주는 기능이다. ex) 아이디를 입력하시오 or 비밀번호를 한 번 더 입력하시오 객체 : border-radius를 통해 모서리에 굴곡을 주기 위해 생성한 객체 ○ HEAD : 웹 표준을 지키기 위해, 개발된 환경을 입력하면 브라우..

STUDY/HTML & CSS

UI / UX 웹 퍼블리셔 & 프론트엔드 [14] - list-style [CSS 2.0]

이제는 딱히 언급이 없어도 제일 중요한 기본 레이아웃 실습을 진행하였다. ○ BODY 객체 .font : 윗 첨자와 아래 첨자를 나타내기 위한 객체 ** : 수학이나 영어에서 사용하는 윗첨자 ** : 수학이나 과학에서 사용하는 아래첨자 객체 : 파일 첨부를 위한 객체 ** input type="file" : 웹에서 흔히 보이는 "파일 선택" 기능을 구현한다. 객체 .ulcss : 현재 사용하고 있는 통신사를 조사하기 위한 리스트 생성 ** 태그 사이에 : radio로 구성된 를 생성한다. ○ HEAD [style] .font { font-family : "폰트명"} : 웹 표준을 맞추기 위한 기능으로써 웹에서 보일 폰트를 지정한다. .ulcss{ list-style: none; margin: 0; pad..

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; = 왼쪽 외부 여백을 ..

STUDY/HTML & CSS

UI / UX 웹 퍼블리셔 & 프론트엔드 [11] - 기본 레이아웃

저번 시간에 이어 CSS 2.0 실습을 진행하였다. 이번엔 border의 속성과 id, class의 개념을 익히고 갈 것이다. ○ id & class ** id : 스타일을 지정할 때 한 가지만 지정해 사용하는 이름 (표기방식은 #이름) 하나의 문서에 고유한 id 하나만 사용할 수 있다! ** class : 그룹으로 묶어 스타일을 지정할 때 사용하는 이름 (표기방식은 .이름) → id와 class 이름은 숫자로 시작할 수 없습니다. css1.0때는 style 속성을 사용하여 직접 객체를 꾸며주었지만, css2.0부터 id와 class 속성으로 선언한 후, 태그에서 지정하여 꾸며줄 수 있다. 이 때, id는 #id명 class는 .class명의 형태로 지정하여 꾸밉니다. ○ border 속성 border를..

STUDY/HTML & CSS

UI / UX 웹 퍼블리셔 & 프론트엔드 [10] - 기본 레이아웃 [HTML 4.0 & CSS 2.0]

CSS 2.0에 도달했다. HTML 3.0부터 CSS 1.0이 나왔으니 둘은 버전업 될 때마다 함께 출시된다 생각하면 된다. [현재 기준 : HTML 5.0 + CSS 3.0 / HTML6가 과연 나올까...?] 태그 + : 목차를 나타낼 때 사용하는 리스트 태그 은 큰 틀, 는 목차를 구성한다. 목차를 구분할 때, 디스크[disc] 모양을 사용하여 구분한다. 태그 + : 목차를 나타낼 때 사용하는 숫자형 리스트 태그 은 큰 틀, 는 목차를 구성한다. 목차를 구분할 때, 숫자를 사용하여 구분한다. 태그 : 레이아웃을 나타낼 때 사용하는 태그 속성 : border는 테두리를 적용할 때 사용하는 속성이며 "border 크기 형태 색상" 순서로 대입하여 적용할 수 있다. ** solid : 한 줄로 구성된 테..