본문 바로가기

전체 글

(224)
[내가 보려고 만든] css 속성 정리 2 지난 포스팅에 이어 css 속성 정리에 대한 내용이다. 이번에는 더 활용적인 속성들을 정리해 볼 예정이다. ​ ​ ​ html 요소들은 박스 모양의 공간을 차지하기 때문에 박스 모양의 영역을 구분할 수 있다. ​ - 콘텐츠 (element/ content) :문서 내용 - 테두리/경계선 (border) : 콘텐츠를 둘러 싼 경계 > 테두리/경계선 두께 : border-width, border-top-width,... > 테두리 모양 : border-style (soid, dotted, double,...) > 테두리 색 : border-color * border로 줄여쓰기 가능 border(두께, 모양, 색상, 값) ​ - 내부 여백 (padding) : 테두리와 내용 사이 여백 > padding, pa..
[내가 보려고 만든] css 속성 정리 html에 이어 css 스타일 시트의 속성을 정리해 보려고 한다. ​ ​ - 내부 스타일 시트 선언 : 의 태그에서 선언 ex) ​ - 외부 스타일 시트 선언 : 에서 태그를 이용 ex) ​ -인라인 삽입 : 모든 태그에 style 속성을 지정하여 삽입 가능 (해당 태그에 특정 스타일 적용 시 사용) ​ - 기본 문법 : 선택자 { 속성: 값; ...} > 선택자(selector) : css 적용 대상 태그 > 속성, 속성 값 : ':' 으로 속성, 속성값 구분, ';' 으로 속성 선언 구분 ​ ​ 1. 태그 선택자 - 다중 태그는 ' , '로 구분 - 태그 나열 -> 태그 중첩 - 다중 속성은 ' ; '로 구분 - 다중 속성값은 ' , '로 나열 (순서대로 나열) ​ 2. ID 선택자 - ... - 각..
[내가 보려고 만든] html 요소 2 이번 html 요소들은 링크와 하이퍼텍스트, 하이퍼미디어와 관련된 것들이다. ​ - 하이퍼텍스트 : 서로 연관된 문서, 텍스트들을 연결하는 것 - 하이퍼미디어 : 텍스트를 비롯하여 이미지, 오디오 등의 멀티미디어 정보의 연결 ​ - 노드 : html 문서, 멀티미디어 정보를 표현하는 기본 단위 - 링크 : 노드 연결 요소 - 앵커 : html 문서 내에서 링크의 출발점/도착점 의미 ​ ​ ​ - : 링크의 시작점 앵커 표현 > href : 이동 목적지 문서의 URL을 지정하는 속성 (위치 지정) - 절대 주소 : URL 형식(인터넷 주소) -외부 링크 사용 시 - 상대 주소 : 현재의 문서와 같은 폴더의 위치에서부터 상대 주소 - 내부 링크 사용 시 ​ > title : 말풍선 창에 나올 설명 지정 속성..
[내가 보려고 만든] html 요소 정리 html을 계속 사용하지 않으면 자꾸 잊어버리거나 다른 요소들과 헷갈리기 때문에, 이제까지 공부한 요소들을 정리해 보려고 한다. ​ - 요소(element) : 내용(content) + 태그(tag) = 문서의 특징을 지정하는 마크업 >시작 태그 : >종료 태그 : >단독 태그 : *태그의 이름 : 공백 구분 x, 대소문자 구분 x, 중첩 x ​ - 속성(Attribute) : 요소의 추가정보 (스타일, URL 등), 요소의 시작 태그에서 지정 OR ​ *하나의 요소에 여러 개의 속성 지정이 가능하며 빈칸으로 구분한다. ​ ​ - : 문서 형식 선언 - : 문서의 title과 문서 속성 지정, 문서 관리를 위한 meta data기록 ex) 문서 정보, 키워드, 저자, 언어, 인코딩 등 ex) : 한글 사..
html을 이용한 예약 페이지 만들기-<form> 이번에는 html의 태그를 이용하여 간단한 식당 예약 페이지를 만들어보는 실습을 다뤄보려고 한다. 은 사용자와 애플리케이션 사이의 상호작용 역할을 하는데, 다양한 입력 양식을 그룹 필하고 방법을 설정해 사용자의 입력 값들을 한 번에 애플리케이션으로 전달해 준다. 자세한 것은 실습을 해 보면서 하나하나 설명할 것이다. ​ 이번 실습에서 만족시켜야 할 조건은 다음과 같다. 1. 예약자 정보와 일자, 시간 선택을 구분하여 입력받는다. 2. 예약자 정보 부분은 을, 일자, 시간 선택 부분에는 을 포함한다. 3. 휴대폰 번호는 01로 시작해야 하며 국번은 3자리 or 4자리로 제한한다. 4. 예약인원은 2명에서 8명까지만 선택 가능하다. 5. 예약 시간은 오전 9시부터 오후 8시까지로 제한한다. ​ ※ head ..
html, css를 이용한 플라워 제작 이번 포스팅에서는 html과 css를 이용하여 '플라워 모형'을 제작해보려고 한다. css의 다양한 속성을 적용시키기 위한 연습을 위해 과제용으로 작성했던 것이다. ​ 이번에도 역시 조건을 설정한 후 이를 만족시키는 페이지를 제작할 예정이다. 조건은 다음과 같다. ​ 1. 색이 다른 4개의 꽃잎 모양으로 이루어진 플라워 만들기 2. 마우스 포인터를 꽃잎 위로 이동했을 시 꽃잎이 1초 동안 빠르게 회전하도록 하기 3. 창의 크기가 변해도 꽃잎의 모양은 변하지 않도록 하기 4. 꽃잎의 각 중앙에 'WWW', 'HTML', 'CSS', 'JS' 글자를 입력하기 5. 꽃잎의 테두리에 변화 주기 6. 꽃잎에 그림자 설정하기 ​ 이번에 만족시키고자 하는 조건들이 꽤 많으므로 주의해서 살펴보아야 한다. 이번 실습에서..
html, css로 시간표 만들기 이번 포스트에서는 html과 css로 시간표 만드는 법을 소개하려고 한다. html 태그로는 웹 페이지의 세세한 부분까지 케어하는 데 한계가 있으므로, css로 웹 문서의 세밀한 디자인적 요소를 다루는 법을 익히는 것이 중요하다. ​ 코드를 설명하기에 앞서 css의 기본 문법에 대해 설명하자면 다음과 같다. 우선 css 선언 방법은 ​ -내부 스타일 시트 선언 -외부 스타일 시트 선언 ​ 두 가지로 나눌 수 있는데, 내부 스타일 시트 선언의 경우 의 태그에서 선언해 주면 된다. (자세한 코드는 밑에서 확인 바란다.) ​ 외부 스타일 시트 선언의 경우 에서 태그를 이용하여 연결한다. 보통 하나의 css 파일을 여러 개의 html 파일에서 공통으로 사용할 때 이 방법을 이용한다. ​ 이외에도 인라인 스타일 ..
html로 간단한 자기소개페이지 만들기 본문에서는 html을 이용하여 간단한 자기소개페이지 만드는 법을 소개하려고 한다. 우선 html이란 웹 문서를 만들기 위해 사용하는 웹 언어로 상당히 직관적인 언어이며, 진입 장벽도 다른 언어에 비해 매우 낮은 편이라고 볼 수 있다. ​ 이번에 만들 자기소개페이지에는 몇가지 요구사항을 정하고 이를 준수하는 페이지를 작성해 볼 건데 요구사항은 아래와 같다. ​ 1. 목차에서 클릭하면 그 내용으로 페이지 간 이동하기 2. 이미지 삽입 3. 유튜브 동영상 삽입 4. 각 내용을 테이블 안에 넣기 ​ 4가지 조건을 고려하여 자기 소개를 하는 웹 문서를 만들어볼 것이다. ​ 코드에 대한 전체 이미지는 다음과 같다. 이제 각 코드에 대해 중요한 부분에 대해 설명을 해보려고 한다. ​ ​ ​ ​ 문서의 시작 부분이다...

728x90