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 웹 퍼블리셔 & 프론트엔드 [6] - UI 태그

과정명에도 명시된, UI는 User Interface의 약자이다. 그러면 Interface는 무엇일까? [위키백과] 인터페이스는 서로 다른 두 개의 시스템, 장치 사이에서 정보나 신호를 주고받는 경우의 접점이나 경계면을 뜻한다. 사전적인 의미로는 쉽게 이해가 되지 않지만 풀어 설명하자면, 서로 다른 것들이 소통하기 위해 도움을 주는 시스템 또는 환경을 의미한다. 우리와 같은 User가 컴퓨터로 작업할 때 사용하는 하드웨어, OS 혹은 소프트웨어들이 전부 인터페이스인 것이다. 이것을 보다 쉽고 가시성 좋게 하는 작업을 UI 작업이라고 한다. 우리가 요즘 사이트를 들어가 보면 로그인 없는 사이트는 보기 힘들 것이다. 이러한 웹 구성을 위한 첫걸음이 이번 UI 태그를 활용한 실습이다. 태그 : 사용자가 입력하..

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를 활용하여 해당 링크를 웹 상에 나타내는 역할을 ..