NAMU DAYS

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 웹 퍼블리셔 & 프론트엔드 [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 : 한 줄로 구성된 테..

STUDY/HTML & CSS

UI / UX 웹 퍼블리셔 & 프론트엔드 [5] - <table> 태그 심화

저번에 이어 태그를 더 진행하였다. border="" 속성 : 테두리를 지정하며 1은 사용, 0은 사용하지 않음을 뜻한다. 이외 두께, 스타일, 색상도 설정할 수 있다 [1px solid black] ex) → 테이블의 테두리를 나타내고 가로 600, 세로 150의 크기로 지정한다. align="" 속성 : 정렬의 의미를 가지며 , , 에 적용할 수 있다. ** left : 왼쪽 정렬 ** right : 오른쪽 정렬 ** center : 가운데 정렬 colspan="" / rowspan="" 속성 : 병합의 의미를 가지며 각각 가로, 세로를 뜻한다. 뒤에 오는 숫자 칸만큼 병합하여 그다음 줄 또는 열에는 해당 칸을 입력하지 않아도 된다. ex)9 → 이 칸을 기준으로 가로 병합 2칸, 세로 병합 2칸을 ..