본문 바로가기
728x90

Programming/Web

[02. CSS] 007. 레이아웃 레이아웃을 그리는 것은 가장 중요한 일 중에 하나이다. 집을 설계하듯이 웹페이지의 전체적인 디자인 설계가 이루어져야 한다. 가구를 배치하듯이 각 요소의 위치를 자유자재로 배치하는 방법에 대해 알아보자. 각 요소의 위치는 다른 요소의 상대적인 위치로 설정할 수도 있고 절대적인 위치, 그리고 고정된 위치로 디자인 할 수 있다. 그리고 아무것도 설정하지 않으면 정상적은 흐름으로 나타난다. 제목 가나다라마바사 ABCDEFG 1234567 position: relative를 설정하면 요소간의 상대적인 위치로 나타낸다. top, left, right, bottom 프로퍼티를 이용해 적절히 오프셋 값을 지정할 수 있다. 반대로 position: absolute를 설정하면 상대적인 위치가 아닌 절대적인 위치로 요소가 .. 더보기
[02. CSS] 006. 이미지 이미지를 정렬하기 위해서는 float 프로퍼티를 사용한다. 값은 left, right를 가질 수 있다. 글자 위치 이미지를 가운데 정렬하기 위해서는 display: block을 이용해 블록 레벨 요소로 변환해야 한다. 그리고 부모 요소에서 text-align: center를 하거나 이미지 자체에 margin: 0px auto;를 지정하여 왼쪽과 오른쪽의 마진을 자동으로 설정해야 한다. 이미지를 배경으로 지정할 수도 있다. 이미지를 반복하거나 배경의 위치 등을 제어할 수 있다. body { background-image: url('이미지 경로'); background-repeat: no-repeat; background-attachment: fixed; background-position: center t.. 더보기
[02. CSS] 005. 목록 및 커서 목록에 쓰이는 프로퍼티는 글머리 기호, 글머리 기호 이미지, 글머리 기호 위치, 목록 단축형 등이 있다. 글머리 기호는 list-style-type 프로퍼티로 제어한다. 값으로 순서 있는 목록 에는 decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman을 가질 수 있고 순서 없는 목록 에는 none, disc, circle, square 값을 가질 수 있다. A B C D E 글머리 기호에 이미지를 넣을 수도 있는데 이는 list-style-image 프로퍼티를 사용하여 추가할 수 있다. ul { list-style-image: url("이미지 경로"); } 글머리 기호 위치를 텍스트에 들여쓸 수도 있다. 기본 값.. 더보기
[02. CSS] 004. 박스 기본적으로 박스의 크기는 height와 width 프로퍼티를 사용하여 설정한다. 추가적으로 min-width, max-width, min-height, max-height를 통하여 너비 및 높이를 제한할 수 있다. 이는 화면이 축소되더라도 표시되는 화면의 내용의 최소 너비 및 높이를 지정해주어 디자인이 망가지는 것을 방지할 수 있다. YOne Labs 박스안에 내용이 넘칠때는 overflow 프로퍼티에 scroll 값을 지정하여 스크롤 바를 지정할 수 있다. hidden 값으로 설정하면 박스의 크기보다 큰 부분은 숨긴다. 박스의 테두리를 설정하는 방법은 border 프로퍼티를 이용하면 된다. border-width를 이용하여 테두리의 굴기를 지정하고 border-style을 이용하여 solid, dott.. 더보기
[02. CSS] 003. 텍스트 요소 내부의 텍스트에 스타일을 적용하는 방법을 알아보자. 텍스트의 서체를 바꾸거나 글자 크기를 바꾸는 등 다양한 스타일을 적용할 수 있다. p { font-family: Georgia, Times, serif; font-size: 10px; font-weight: normal; font-style: normal; text-transform: uppercase; text-decoration: underline; line-height: 1.4em; letter-spacing: 1em; word-spacing: 1em; text-align: left; text-indent: 20px; text-shadow: 1px 1px 2px #111111; } font-family는 텍스트에 사용할 서체를 지정한다. 여러.. 더보기
[02. CSS] 002. 색상 요소 내부에 있는 텍스트에 색상을 지정하는 방법은 아래와 같다. p { color: rgb(100, 100, 100); } 그리고 배경색을 지정하는 방법은 아래와 같다. p { background-color: rgb(100, 100, 100); } 색상에 대한 정보는 네이버에 색상표라고 검색하면 자세히 나오고 원하는 색을 찾을 수 있다. 추가적으로 색에 투명도를 2가지 방법으로 할 수 있다. 하나는 opacity 프로퍼티를 적용하는 것이고 하나는 rgba를 사용하는 것이다. p { background-color: rgb(100, 100, 100); opacity: 0.5; } p { background-color: rgba(100, 100, 100, 0,5); } 더보기
[02. CSS] 001. CSS란 CSS를 사용하여 HTML을 더욱 풍요롭게 만들 수 있다. CSS규칙은 선택자(selector)와 선언(declaration)이라는 두 부분으로 구성되어 있다. 그리고 선언은 프로퍼티와 값이라는 두 부분으로 나누어져 있다. p { font-family: Arial; } p가 선택자이고 {}안에 있는 것이 선언이다. 그 중 font-family가 프로퍼티이며 Arial은 값이다. 선택자 의미 예시 범용 선택자 문서에 있는 모든 요소 의미 * {} 타입 선택자 요소 이름을 의미 h1 {} 클래스 선택자 Class 속성의 값을 의미 .sidebar {} / p.sidebar {} id 선택자 id 속성의 값을 의미 #abc {} 자식 선택자 직계 자식 요소를 의미 li>a {} 자손 선택자 직계 + 특정 요소.. 더보기
[01. HTML] 009. 추가 마크업 추가적으로 몇 가지 중요한 마크업(태그 등을 이용하여 문서나 데이터의 구조를 명기)에 대해 알아보자. 기본적으로 HTML5를 사용하기 위해서는 코드의 가장 위에 을 선언한다 이는 HTML5를 사용하기 위해 필수적인 것은 아니나 다른 버전과 구별하기 위해 사용된다. 앞에서도 잠깐 언급되었지만 id속성을 사용하여 특정 요소의 스타일이나 동작을 제어할 수 있다. id값은 하나만 사용할 수 있으며 절대 겹치면 안된다. 반면에 class속성은 같은 class를 동시에 제어할 수 있다는 점에서 id와 다르다. 앞에서 사용된 텍스트와 요소들을 하나의 블록으로 그룹화하기 위해서 를 사용한다. 그룹화하여 요소들을 그룹단위로 제어하면 편리하다. 블록단위는 항상 새로운 줄에서 시작한다면 나란히 묶어주는 인라인으로 그룹화하기.. 더보기
[01. HTML] 008. 폼 폼은 방문자로부터 정보를 수집하는 데 사용된다. ID나 패스워드를 폼을 통해 입력받아 로그인을 하거나 라디오 버튼, 체크박스, 드롭다운 박스 등으로 사용자에게 몇 가지 범위내에서 선택할 수 있는 기능을 제공할 수도 있다. 폼의 기본적인 구조는 요소를 사용하여 다음과 같다. ID action 속성은 정보를 전달할 서버의 url이다. method는 get과 post 두 가지 전달방식이 있는데 get은 url창에 정보가 노출된다. 하지만 post방식은 http 헤더에 추가하여 전송하기 때문에 비밀번호 등 노출되면 안되는 정보를 전송할 때 사용된다. 요소를 추가하여 최대 길이 30글자의 텍스트를 username의 이름으로 입력받는다. 만약에 password처럼 화면에 나타나서는 안되는 정보는 type=”pass.. 더보기
[01. HTML] 007. 테이블 테이블의 기본 구조는 다음과 같다. 머리말 머리말 머리말 데이터 데이터 데이터 데이터 데이터 데이터 은 table row의 약자다. 테이블의 행을 추가할 때 사용한다. 그리고 는 table data의 약자다. row안에 data를 삽입할 때 사용한다. 는 table heading의 약자다. 요소와 비슷하게 사용되나 머리말을 나타내는 점이 다르다. 테이블의 모습이 어딘가 조금 이상하다. 테두리가 현재는 없는 상태이다. 추후에 CSS를 이용해 테두리를 넣는 방법을 알아보기로 한다. 테이블의 열병합과 행병항은 colspan과 rowspan으로 할 수 있다. 머리말 머리말 머리말 데이터 데이터 데이터 데이터 보다 큰 데이터를 다룰 때에는 긴 테이블을 사용하는 경우가 많다. 긴 테이블은 , , 3가지 부분으로 구.. 더보기
728x90

티스토리툴바