본문 바로가기

분류 전체보기

 (105)
[CSS] 글자 스타일 1. 글자 크기 변경하기 : font-size 글자의 크기를 변경할 때는 font-size 속성을 사용합니다. font-size에 지정할 수 있는 값의 단위는 픽셀(px), 포인트(pt)입니다. 또, font-size에는 large, medium, small을 값으로 지정할 수 있습니다. 원하시는 값을 골라 사용하시면 됩니다. 1. 글자 크기 변경하기 10px 20px 10pt 20pt medium large 2. 글자 기울게 효과 적용하기 : font-style 글자에 기울게 효과를 적용하기 위해서는 font-style의 값을 italic으로 지정하면 됩니다. 2. 글자 기울게 효과 적용하기 기울게 효과 X 기울게 효과 O 3. 글자 굵기 변경하기 : font-weight 글자의 굵기를 변경하기 위해서..
[CSS] 속성 선택자, 가상 클래스 선택자 속성 선택자 특정 스타일이 적용되는 위치가 속성인 선택자 속성 선택자의 종류 형식 설명 1 [속성] {속성 : 속성 값: ...} [ ]의 속성을 찾아 스타일 적용 ex a [href] {/*css코드*/} href 속성이 있을 경우 스타일 지정 2 [속성=값] { 속성 : 속성 값; ... } 속성과 지정한 값이 일치하는 경우 스타일 적용 ex input [ type = "email" ] {/*css코드*/} input 태그의 type이 email 이라면 스타일 적용 3 [속성~=값] { 속성 : 속성 값; ... } 속성과 지정한 값이 일치하는 경우 스타일 적용 (단, 비교 대상이 다수라면 하나의 조건만 만족시켜도 스타일을 적용) ex h2 [example="test" ] {/*css코드*/} h2 ..
[CSS] 선택자의 기본 선택자의 개념 특정 스타일이 적용되는 위치 선택자의 사용방법 선택자는 선택자 { } 형태로 사용합니다. 괄호 앞에 선택자를 작성하시고 괄호 안에 css 코드를 자유롭게 작성하시면 됩니다. 아래 코드에서는 *과 h1이 선택자입니다. * { /* css 코드 */ } h1{ /* css 코드 */ } 선택자의 종류 1. 전체 선택자 - * 전체 선택자는 css 파일이 적용된 html 파일의 모든 부분에 스타일을 적용할 때 사용합니다. 전체 선택자는 * 기호로 표시하므로 '* { }' 형태로 사용하면 됩니다. *{ /*css 코드 */ } 2. 태그 선택자 태그 선택자는 html 파일의 특정 태그에 스타일을 적용할 때 사용합니다. 태그 선택자를 사용하면 해당 태그를 사용하는 모든 영역에 일괄적으로 스타일이 적..
[HTML] 자바스크립트를 대신하는 input 태그 속성들 HTML5에서는 기존에 자바스크립트로 구현해야했던 기능들을 input 태그의 속성들로 간단하게 구현할 수 있습니다. 예를 들어, 폼을 작성한 후 제출할 때 작성되지않은 빈칸이 있으면 경고 메시지를 띄우는 경우 이전에는 자바스크립트로 해당 이벤트를 구현해야했으나 HTML5에서는 태그에 required 속성을 추가하는 것만으로도 해당 이벤트를 쉽게 구현할 수 있습니다. 이 글에서는 자바스크립트를 대신하는 input 태그 속성들에 대해 알아보겠습니다. 번호 속성 설명 1 placeholder 힌트 표시 2 readonly 읽기 전용으로 지정 3 required 필수 영역으로 지정 4 min 최소값 5 max 최대값 6 step 숫자 간격 7 maxLength 최대 글자 수 지정 8 autocomplete 자동..
[HTML] form - 글, 버튼 삽입하기 폼을 만들다 보면 장문의 글이나 버튼을 삽입해야하는 경우가 발생합니다. HTML5에서는 태그를 통해 글을 태그를 통해 버튼을 삽입할 수 있습니다. 1. 태그는 텍스트를 삽입할 때 사용합니다. 텍스트 상자와 비슷하지만 텍스트 상자와는 달리 장문의 글을 삽입할 때 사용합니다. 해당 태그는 형태로 사용합니다. 태그에는 cols, rows, name 속성이 있습니다. cols와 rows는 각각 태그로 생성되는 텍스트 입력 상자의 영역의 가로와 세로 길이를 의미합니다. cols의 경우 가로 길이를 문자 단위를 기준으로 판단하며 지정되어있는 cols의 크기를 넘어간다면 자동으로 줄바꿈이됩니다. rows의 경우 세로 길이를 텍스트의 줄 수를 기준으로 판단하며 지정되어있는 rows의 크기를 넘어간다면 오른쪽에 스크롤바..
[HTML] 드롭다운 목록 만드는 법 드롭다운 목록을 만들기 위해서는 와 태그를 사용해야합니다. 먼저, 태그를 사용해 드롭다운의 목록의 시작과 끝을 지정합니다. 그리고 태그를 사용해 드롭다운 목록의 선택지를 입력해줍니다. 이때, 태그는 반드시 태그 블록 사이에 위치합니다. 태그의 경우 주의하셔야할 점이 하나 더 있습니다. 태그에는 value라는 속성이 있습니다. 이는 드롭다운 목록에서 선택된 항목의 값을 서버로 넘겨줄 때 필요합니다. 예를 들어, one은 one이라는 항목이 선택되었을 때 1이라는 값을 서버로 전송한다는 의미입니다. one two three four five 위의 코드를 실행시키면 아래의 사진과 같은 드롭다운 목록이 나타나는 것을 확인할 수 있습니다. 이는 가장 기본적인 드롭다운 목록의 형태입니다. 개발자는 와 태그의 속성을..
[HTML] input 태그 사용해 사용자 입력 받기 웹에서 사용자로부터 정보를 입력받기 위해서는 태그를 사용해야합니다. 태그의 type 속성 값에 따라 입력받을 수 있는 요소들이 달라집니다. 예를들어, 텍스트를 입력받기 위해서는 text를 색상을 입력받기 위해서는 color 값을 사용합니다. 태그는 보통 태그와 함께 사용하며 태그를 사용해 입력받은 정보를 태그를 통해 서버에 전송합니다. 그 외의 값들은 아래의 표를 참조해주시면 됩니다. 실습번호 type 속성 설명 1 text 텍스트 2 radio 라디오 버튼 3 checkbox 2개 이상 선택 가능한 체크 박스 4 color 색상 표 5 search 검색 상자 6 url URL 주소 7 tel 전화번호 8 email 메일 9 password 비밀번호 10 date 사용자 지역 기준 날짜(연, 월, 일) ..
[HTML] form 만드는 법 웹페이지를 제작하다 보면 사용자의 정보를 받아야 하는 경우가 발생합니다. 사용자가 특정 사이트를 이용하기 위해 회원가입을 하려 하는 경우가 대표적인 경우입니다. 이 경우 사용자가 사용할 아이디, 비밀번호를 입력해주면 이 정보를 전달받아야 합니다. 이를 가능하게 해주는 것이 form입니다. form을 만들 때는 태그를 사용합니다. 태그의 속성은 아래의 표와 같습니다. 속성 설명 method 폼의 전송 방식. 길이 제한이 없는 post값을 사용. name 폼의 이름. action 폼을 전송할 서버 쪽의 스크립트 파일로 지정. target action에서 지정한 스크립트 파일이 열리는 위치 지정. (실습1) form 만들기 아래와 같은 회원가입 폼을 만들어보겠습니다. 아이디와 비밀번호를 입력받고 SignUp을..

티스토리툴바