NAMU DAYS

STUDY/HTML & CSS

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

저번 실습에 이어 CSS 1.0을 실습하였다. 태그 : 사용자가 선택할 수 있는 범위를 적용하는 태그 : 와 함께 사용하며, 무조건 1개 이상 존재해야 한다. 태그 : html, pdf, mp3, mp4, avi 등 여러 파일을 불러오는 역할 ** data="" 속성 : 불러오는 파일명을 입력한다(경로 사용) ** type="" 속성 : 불러오는 파일의 확장자 지정 (윈도우 제공 외 프로그램 필요시 = application/확장자) # : 와 을 활용하여 selectbox와 같은 기능을 구현하였고, "바지"에 해당되는 option에 selected 속성을 활용하여 default로 바지가 선택되어 있음을 알 수 있다. # : index9.html이 위치하는 [html] 디렉토리에 필요한 파일들을 다운하고,..

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 등)

STUDY/HTML & CSS

UI / UX 웹 퍼블리셔 & 프론트엔드 [7] - form 태그

이번 실습은 저번 실습에 이어 UI를 구성하는 실습이다. 저번의 틀을 만드는 과정이면 이번엔 을 이용하여 데이터를 주고받을 수 있는 기능을 추가하였다. 태그 : 데이터를 주고 받기 위해 큰 테두리로 감싸는 개념 (안에서 일어나는 데이터 = form data) action="" 속성 : form data를 서버로 보낼 때, 해당 데이터가 도착할 URL을 명시 type="submit" | "reset" 속성 : 태그가 있어야 작동된다. ** submit : form의 action이 수행되도록 한다. ** reset : 사용자가 form에 입력한 값 초기화 결과창에서 첫 번째 text와 두 번째 text의 값을 서로 입력하고 입력 초기화[reset]를 누를 경우 어떻게 될까? → 첫 번째 text는 초기화되지..

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칸을 ..

STUDY/HTML & CSS

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

2일차 세번째 실습은 테이블을 만들기 위한 HTML 2.0 태그이다. 태그 : 그래프, 표, 통계, 게시판, 웹 아웃라인을 생성할 때 사용 : 테이블 태그에서 줄(행)을 생성할 때 사용 : 테이블에서 칸(열)을 생성할 때 사용 ex) ** 3 x 2 테이블일 경우 : [ 1쌍 + 3쌍 ] x 2묶음 x 2묶음 ** 2 x 3 테이블일 경우 : [ 1쌍 + 2쌍 ] x 3묶음 x 3묶음 ** 너비와 높이를 주고 싶을 때 , : width와 height 적용이 가능하다. : 오직 height만 적용 가능하다. ex) 1 2 3 → 가로의 길이가 적용되지 않는다. 1 2 3 → 에 적용할 경우, 가로 너비가 전부 200으로 설정, 에 적용할 경우, 해당 열의 너비만 200으로 설정된다.

STUDY/HTML & CSS

UI / UX 웹 퍼블리셔 & 프론트엔드 [3] - HTML 2.0 태그 & 절대경로 vs 상대경로

2일 차 두 번째 실습은 보다 효과적인 웹 사이트를 만들기 위한 HTML 2.0 기본 태그이다. ○ 기본 태그 : 코딩을 하고 웹에 출력할 때, 스페이스바는 여러 번 눌러도 한 번 띄우는 것으로 인식하는데 는 스페이스바 역할을 수행해준다. [ 세미콜론( ; )을 빼먹지 않도록 주의하자! ] 태그 : 글자의 색상, 크기와 글꼴을 설정할 때 사용한다. ** 속성 : 글자의 색상을 설정할 때 사용한다. ** 속성 : 글자의 크기를 설정할 때 사용하며 1에서 7까지의 수만 사용할 수 있다. 와 : href 속성과 src 속성은 전 실습 때 다뤘던 속성이다. 둘의 차이점은 href는 move의 역할 src는 load의 속성을 가졌다는 점이다. iframe은 src를 활용하여 해당 링크를 웹 상에 나타내는 역할을 ..