Study Record

웹에서 색상 표현하기웹에서 색상을 표현하는 방법은 16진수 표기법, rgba와 rgba 표기법, hsl과 hsla 표기법, 색상 이름 표기법이 있다.   16진수 표기법#ff0000 처럼 # 기호 다음에 6자리의 16진수로 표시하는 방법이 가장 기본적으로 색을 표현하는 방법이다.    rgb와 rgba 표기법16진수 표기법 다음으로 rgb 와 rgba 표기법이 있다. rgba 의 a(alpha)는 불투명도 값을 나타내는 것으로 1은 완전히 불투명한 것이고 0.9 나 0.8 처럼 숫자가 작아질수록 투명해지다가 0이 되면 완전히 투명해진다./* 기본형 */rgb(red 값, green 값, blue 값);rgba(red 값, green 값, blue 값, alpha 값);/* 예시 */color: rgb(2..

목록의 불릿과 번호 스타일 지정하기 - list-style-type 속성메뉴 항목이 목록과 링크를 결합한 형태이다. 목록과 링크를 만드는 속성에 대해서 알아보고자 한다. /* 기본형 */list-style-type: none | |    순서 없는 목록에서 불릿 모양 바꾸기 순서 없는 목록은 기본적으로 채운 원(disc)을 불릿으로 사용한다. list-style-type 속성의 여러 속성 값을 이용해 불릿을 바꿀 수 있다.none: 항목 앞에 붙는 불릿을 없앤다. 주로 네비게이션(메뉴)를 만들 때 불릿이 보이지 않게 사용한다.disc : 채운 원 모양의 불릿이다. 기본값이다.circle : 빈 원 모양의 불릿이다.square : 채운 사각형 모양의 불릿이다.  회사 소개 도서 사무실 ..

텍스트 스타일 텍스트 스타일은 글자와 단어들, 그리고 글자들로 이루어진 문단에서 사용되는 스타일이다.   글자 색 지정하기 - color 속성웹 문서에서 문단이나 제목 등의 텍스트에서 사용되는 글자 색을 바꿀 때는 color 속성을 사용한다. 속성값은 16진수나 rgb(또는 rgba), hsl(또는 hsla), 색상이름으로 표기할 수 있다.h1 {color:rgb(0,200,0);} h2 {color:blue;} .accent {color:#ff0000;}   텍스트에 줄 표시하기/없애기 - text-decoration 속성decoration 속성을 이용하면 텍스트에 밑줄을 긋거나 취소선을 표시할 수 있다.h1 { text-decoration: underline; } /* 밑줄을 표시한다. */p { ..

글꼴 관련 스타일텍스트 스타일 중 글자의 모양새 즉, 크기와 굵기와 이텔릭체 여부 등 글꼴 속성을 알아본다.   font-family 속성 - 글꼴 지정하기웹 문서에서 사용할 글꼴은 font-family 속성으로 지정할 수 있다. p { font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;}이미 설치된 글꼴이 아닌 경우, 브라우저의 기본 값이 나타나 각각 다른 글꼴로 표시된다. 따라서 웹 문서에서 글꼴을 지정할 때는 한가지 글꼴만 지정하기도 하지만 지정한 글꼴이 없을 경우를 위해 두번째, 세번째 글꼴까지 지정해야 한다. 두 개 이상의 글꼴 이름을 지정할 때는 글꼴 이름과 이름 사이의 쉼표(,)로 구분한다. 시스템에 설치되..

스타일(style)이란?웹 에서의 스타일(style)은 미리 약속한 스타일 속성을 입력해 웹을 디자인하는 것을 말한다. 한 문서에서 반복해 쓰이는 스타일들을 모아 놓은 것을 '스타일 시트'라고 부른다. HTML 로 스타일 작업을 하지 않고 따로 스타일을 사용하는 이유로는 다음과 같다.웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다.다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다.   스타일 형식선택자 { 속성: 값; }/* 예시 */h2 { font-soze: 20px; }p { font-size: 20px; color: orange;}   스타일과 스타일 시트웹 문서 안에는 여러 개의 스타일 규칙이 사용되는 경우가 많은데 이런 스타일 규칙들을 한눈에 확인하고 필요할 때마다 수정하..

태그로 버튼 넣기 태그로 버튼(submit, reset 등)을 만들었던 것과 비슷하게 태그를 이용해도 폼을 전송하거나 리셋(reset)하기 위한 버튼을 삽입할 수 있다. 다음 예시에서 input 태그의 submit 유형과 button 태그의 submit 유형은 같은 기능을 한다. 마찬가지로 reset 유형도 같은 기능을 한다. 이름 나이 제출하기 리셋하기 input 태그를 사용했을 때와 차이점이라면 button 태그는 화면 낭독기에서 이 부분에는 버튼이 있다는 것을 알고 정확히 전달할 수 있다. 버튼 태그 안에 이미지 태그가 포함된 예시) 리셋하기   태그 - 계산 결과입력하는 값이 계산 결과라는 것을 브라우저에게 알려준다. 브라우저 화면에 다르게 표시되는 ..

드롭다운 목록 만들기(, , )여러 옵션 중에서 선택하도록 하고 싶을 때 드롭다운 목록을 사용한다. 드롭다운 목록은 태그와 태그를 이용해 표시한다.  속성size : 화면에 표시될 드롭다운 메뉴의 항목 개수를 지정한다(크롬의 경우 size에서 지정한 개수보다 하나 더 많은 옵션이 표시된다)multiple : 여러 개의 옵션이 함께 표시도면 Ctrl 키를 누른 상태로 드롭다운 메뉴에 있는 여러 항목을 선택할 수 있다. 속성value : 옵션을 선택했을 때 서버로 넘겨질 값을 지정한다.selected : 화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정한다.  간단한 예시) 사과 레몬 딸기  multiple 속성으로 여러 항목을 선택할 때는 ctrl 키를 누른 채로 선택이 가능하다 ..

태그웹에서 사용자가 입력할 부분은 주로 태그를 이용해 넣는다. 폼에서 사용자 입력을 받기 위해 사용하는 태그이다.    태그로 입력 항목 만들기웹에서의 폼은 크게 사용자가 입력하는 부분과 입력한 내용을 서버로 보내는 버튼 부분으로 나눌 수 있다. input 태그로 만들 수 있는 폼 요소가 상당히 많은데 그것은 type 속성을 이용해 구분한다.  + id 속성 사용하기여러번 사용된 폼 요소를 구분하기 위해 사용하는 것이 id속성이다.   여러가지 type 유형 살펴보기  히든 필드 만들기(type="hidden")히든 필드는 화면상의 폼에는 보이지 않지만 사용자가 입력을 마치고 폼을 서버로 전송할 때 서버로 함께 전송되는 요소이다. 보통 사용자에게 굳이 보여 줄 필요가 없지만 관리자가 알아야 하는 것을 ..