※FONT와 TEXT는 디자인적인 부분이나 가독성 측면에서 매우 중요한 요소 중 하나입니다.

CSS를 활용하여 TEXT에 크기, 글꼴, 효과등을 주거나 정렬하는 방법을 알아보도록 하겠습니다.

 

목차

1. FONT

2. TEXT

 

1. FONT

폰트는 크게 4가지의 속성을 가집니다. 각 속성에 대해 자세히 알아보도록 하겠습니다.

font-size 길이(px, em, ex), 백분율(%; 140%) 폰트의 크기를 지정
font-family 글자체(굴림체, 궁서, 맑은 고딕 등) 폰트 모양을 지정
font-style normal, italic, oblique 폰트 형태(이태릭체 등)를 지정
font-weight normal, bold, bolder, lighter, 숫자(100 200, ‥ ,900) 폰트의 굵기를 지정

 

@font-size 속성

글꼴의 크기를 지정하는 속성입니다.

keyword medium(기본 값), xx-small, x-small, small, large, x-large, xx-large, smaller, larger
length px, em 등 고정 수치로 지정합니다.
% 부모 요소의 font-size 기준의 퍼센트로 지정합니다.

 

@font-family 속성

글꼴을 지정하는 속성입니다.

 

font-family: '고딕', '돋움';

첫 번째 글꼴을 사용하되 첫 번째 글꼴이 없을 시 ', '로 구분된 두 번째 글꼴을 사용하는 방식입니다.

글꼴은 더 추가할 수 있습니다.

 

 

@font-weight 속성

글꼴의 굵기를 지정하는 속성입니다.

normal 기본 값 (400)
bold 굵게 표현(700)
bolder 부모 요소 보다 두껍게 표현
lighter 부모 요소 보다 얇게 표현
number 100, 200, 300, 400, 500, 600, 700, 800, 900 (클수록 더 두껍게 표현)

 

@font-style 속성

글꼴의 스타일을 지정하는 속성입니다.

normal font-family 내에 분류된 기본 값
italic italic 스타일로 표현합니다. (italic체)
oblique oblique 스타일로 표현합니다. (기울임)

 

2. TEXT

 

@text-decoration 속성

텍스트의 장식을 지정하는 속성입니다. 아래 속성들의 단축 속성으로, 기본 값은 차례대로 아래 3가지 속성의 값입니다. 

none 텍스트 꾸밈을 생성하지 않음 ( 기본값 )
underline 밑줄로 꾸밈을 설정
overline 윗줄로 꾸밈을 설정
line-through 중간을 지나는 줄로 꾸밈을 설정

@text-decoration-style 속성

solid 한줄 스타일 ( 기본 값 )
double 이중선 스타일
dotted 점선 스타일
dashed 파선 스타일
wavy 물결 스타일

 

@text-indent 속성

텍스트의 들여 쓰기를 지정하는 속성입니다. 

length px, em 등 고정 수치로 지정. 음수 허용
% 부모 요소의 width를 기준으로 퍼센트로 지정

 

@text-align 속성

텍스트의 정렬을 지정하는 속성입니다. text 가운데 정렬을 위해 많이 사용됩니다.

left 텍스트를 왼쪽으로 정렬
right 텍스트를 오른쪽으로 정렬
center 텍스트를 중앙으로 정렬
justify 텍스트를 라인 양쪽 끝으로 붙여서 정렬. (마지막 라인은 정렬 하지 않음)

 

@text-align과 display의 관계

 -  text-align은 inline-level에 적용

 -  text-align은 block-level에 적용할 수 없음 

 

block 요소를 가운데 정렬 하고자 한다면 margin의 auto 값을 이용해서 양쪽 여백값을 조절하면 됩니다. 

- 인라인 요소 : text-align (center) 

- 블록 요소 :  margin (auto) 

 

 ex) margin:0 auto;

-첫 번째 0은 top, bottom의 여백, 두 번째 auto부분은 left, right의 여백입니다. 좌우 여백을 auto로 줘서 자동으로 양쪽 여백을 같게 만들어 주면 가운데로 정렬됩니다.

 

저작자표시 비영리 변경금지 (새창열림)

'HTML' 카테고리의 다른 글

비주얼스튜디오 코드(Visual Studio Code)의 그리드(Grid) 1  (0) 2023.02.25
비주얼스튜디오 코드(Visual Studio Code)의 TRANSFORM(변형)과 TRANSITION(변화)  (0) 2023.02.24
비주얼스튜디오 코드(Visual Studio Code)의 SELECTOR(선택자)  (0) 2023.02.22
비주얼스튜디오 코드(Visual Studio Code)의 FORM_INPUT과 BUTTON  (0) 2023.02.21
비주얼스튜디오 코드(Visual Studio Code)의 FORM  (0) 2023.02.20

※HTML의 요소들의 스타일을 제어할 수 있는 CSS를 사용하려면 HTML의 원하는 요소와 범위를 정확하게 선택할 수 있어야 합니다.

CSS문법에서는 원하는 요소를 선택할 수 있도록 다양한 방법을 제공하고 있는데 이를 SELECTOR(선택자)라고 합니다.

크게 4개의 분류로 나누어 구분할 수 있습니다.

  • 기본 선택자(Basic selectors) - 기본적인 선택자의 표현
  • 그룹 선택자(Grouping selectors) - 다수의 요소를 선택하는 선택자의 표현
  • 결합 선택자(Combinator selectors) - 요소와 인접하는 형제 또는 자식 요소들을 선택하는 선택자의 표현
  • 의사 클래스 또는 의사 요소 (Pseudo classes or Pseudo elements)
목차

1. 선택자의 우선순위

2. 기본 선택자와 그룹 선택자

3. 결합 선택자와 속성 선택자

 

1. 선택자의 우선순위

  1. 같거나 서로 다른 선택자 방식으로 동일 요소에게 동일 속성을 뒤쪽에서 다른 값으로 재정의할 수 있다.
  2. 서로 나누어진 CSS 코드인 경우 HTML 문서에 적용되는 순서에 따라 뒤쪽에서 동일 요소에게 동일 속성을 재정의 할 수 있다.
  3. 선택자의 종류에 따른 우선순위 규칙(1항보다 우선)
    • 주요 단일 선택자 방식에서 id, class, tag 순의 우선순위
    • 우선순위 규칙에 의해 경우에 따라 뒤쪽에서 동일 속성을 재정의 할 수 없다.
  4. 결합 관계(복합 선택자 패턴)의 경우는 결합되는 선택자 방식의 정해진 점수를 합산하여 우선순위를 정한다.
  5. ! important를 사용해서 가장 우선적으로 적용이 가능하다.

 

@선택자 방식적용 선택자 우선순위

!important 속성: 적용 값 !important; 속성 기준 가장 우선 속성 기준 가장 우선 속성 기준 가장 우선
인라인 스타일 style=”” 1 요소 기준 가장 우선 요소 기준 가장 우선
ID 선택자 #selector 2 100 #header > .logo > a {  }
CLASS 선택자 .selector 3 10
속성 기반 선택자 a[href*=”#”] 3 10
가상 클래스 a:hover 3 10
가상 요소 span::after 3 10
태그 선택자 a 4 1
전체 선택자 * 5 0

 

2. 기본 선택자와 그룹 선택자

 

@선택자 종류

태그 선택자 p {} 기본 태그를 선택합니다.
클래스 선택자 .class {} 클래스 태그를 선택합니다.
아이디 선택자 #id {} 아이디 태그를 선택합니다.
그룹 선택자 p, .class, #id {} 여러가지 태그를 선택합니다.
전체 선택자 * {} 전체 태그를 선택합니다.

 

@코드로 보기  
      * {
            margin: 0;
            padding: 0;
        }

        p {

            color: black;

            font-size: 40px;
        }
 
        p, h1, h2 {
            color: black;
            font-size: 40px;
        }

        #id {

            color: black;

            font-size: 40px;
        }

 

 

3. 결합 선택자와 속성 선택자

 

@결합 선택자

자식 결합자 a > b a의 직계 자식인 노드를 선택
자손 결합자 a b a의 자손인 노드를 선택
일반 형제 결합자 a ~ b a와 b의 부모가 같고, a뒤에 오는 모든 b를 선택
인접 형제 결합자 a + b a와 b의 부모가 같고, a 바로 뒤에 오는 b만 선택

 

@속성 선택자

[attribute="value"] 해당 속성을 가지며, 그 값이 value인 요소를 선택합니다.
[attribute~="value"] 해당 속성을 갖고, 그 값중에 value가 포함되는 요소를 선택합니다.
[attribute|="value"] 해당 속성을 갖고, 그 값이 value이거나 value-로 시작하는 요소를 선택합니다.
[attribute^="value"] 해당 속성을 갖고, 그 값이 value로 시작하는 요소를 선택합니다.
위의 속성 선택자와 차이점은 value-로 시작하는게아니라, value로 시작한다는 점입니다.
[attribute$="value"] 해당 속성을 갖고, 그 값이 value로 끝나는 요소를 선택합니다.
[attribute*="value"] 해당 속성을 갖고, 그 값이 value를 포함하기만 하면 모두 선택합니다.

 

저작자표시 비영리 변경금지 (새창열림)

'HTML' 카테고리의 다른 글

비주얼스튜디오 코드(Visual Studio Code)의 TRANSFORM(변형)과 TRANSITION(변화)  (0) 2023.02.24
비주얼스튜디오 코드(Visual Studio Code)의 FONT와 TEXT  (0) 2023.02.23
비주얼스튜디오 코드(Visual Studio Code)의 FORM_INPUT과 BUTTON  (0) 2023.02.21
비주얼스튜디오 코드(Visual Studio Code)의 FORM  (0) 2023.02.20
비주얼스튜디오 코드(Visual Studio Code)의 하이퍼링크  (0) 2023.02.19

※form의 요소 중 사용빈도가 높고 중요도도 높은 <button>과 <input>에 대해 알아보겠습니다.

button 태그와 input 태그의 가장 큰 차이점은 button은 스스로 닫지 않는 태그이고 input은 스스로 닫는 태그라는 것입니다.

그래서 <button> 요소 안에는 텍스트나 이미지와 같은 콘텐츠를 삽입할 수 있지만, <input> 요소를 사용한 버튼에는 이와 같은 콘텐츠를 삽입할 수 없습니다.

목차

1. BUTTON

2. INPUT

 

1. BUTTON

<button> 태그는 클릭이 가능한 버튼 요소입니다. submit, reset, button 3가지 type을 가질 수 있습니다.

<button>은 다양한 용도로 사용되고 브라우저마다 다른 type을 기본값으로 사용하게 될 수도 있기 때문에 HTML 문서를 보고 <button>이 어떤 역할을 하는 것인지 한눈에 알기 어렵기 때문에 type은 습관적으로 명시해 주는 것이 좋습니다.  

@<button type=" "> 속성

type="submit"  데이터를 제출하기 위한 버튼으로 지정한다. (기본값)
type="reset"  초기화버튼으로 지정한다. 클릭 시 <form> 내부의 모든 값(value)을 초기화해준다.
기본값(default value)을 지정해놨다면 이 값으로 다시 초기화된다.
type="button"  버튼으로 지정한다. 클릭 이벤트 핸들러는 JavaScript로 직접 구현한다.

 

2. INPUT

@<input type=" "> 속성

type="submit"  <input>을 form handler에 데이터를 제출하기 위한 버튼으로 지정한다.
form handler는 보통 데이터를 처리하는 서버단 페이지로 지정된다.
버튼에 value 속성을 지정하면 <input>에 기본값(default value)로 표시된다.
type="reset"  <input>을 초기화버튼으로 지정한다. 클릭 시 <form> 내부의 모든 값(value)을 초기화해준다.
기본값(default value)을 지정해놨다면 이 값으로 다시 초기화된다.
type="button"  <input>을 버튼으로 지정한다.
type="img" <input>을 이미지버튼으로 지정한다.
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
type="text" <input>을 한 줄 입력 가능한 텍스트필드로 지정한다. input의 기본 type이다.
size값을 지정하면 필드 너비가 자동조정된다. 기본 size값은 "20"이다.
type="search" <input>을 검색필드로 지정한다. 일반적인 텍스트필드처럼 동작한다.
type="password" <input>을 암호필드로 지정한다. 입력한 텍스트는 별표나 원으로 마스킹된다.
type="tel" <input>을 전화번호 필드로 지정한다.
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"과 함께 사용해서 형식을 지정할 수 있다.
type="email" <input>을 이메일을 포함해야하는 입력필드로 지정한다.
브라우저에 따라 제출 시 이메일 주소 유효성검사가 자동으로 이루어진다.
일부 스마트폰에서는 type="email"을 인식하고 키보드에 ".com"를 추가로 띄워준다.
type="url" <input>을 URL주소를 포함해야하는 입력필드로 지정한다.
type="number" <input>을 숫자 입력만 가능한 필드로 지정한다.
min, max값을 지정하면 자릿수에 따라 필드 너비가 자동조정된다. (그림은 min="-10000"일 때)
type="range" <input>을 슬라이드 컨트롤과 범위 내 숫자를 선택할 수 있는 컨트롤로 지정한다.
기본 범위는 0부터 100이고, min, max, step 속성을 추가로 지정할 수 있다.
type="radio" <input>을 라디오버튼으로 지정한다. 선택지 중 단 하나의 항목만 선택할 수 있다.
type="checkbox" <input>을 체크박스로 지정한다. 선택지 중 0개, 1개 또는 여러 개를 선택할 수 있다.
type="color" <input>을 색상팔레트로 지정한다. value="#ff0000"과 같이 헥사코드로 기본값을 지정할 수 있다.
type="time" <input>을 Time Picker로 지정한다. (no time zone)
type="date" <input>을 Date Picker로 지정한다.
min, max속성으로 날짜 범위를 지정하면 Date Picker 캘린더에 지정한 기간만 활성화된다.
type="datetime-local" <input>을 Date Picker & 시간입력 필드로 지정한다. (no time zone)
type="week" <input>을 Week Picker로 지정한다.
type="month" <input>을 연도와 달을 Picker로 지정한다.
type="file"  <input>을 '파일선택 버튼'과 '선택된 파일 표시'로 지정한다. 
type="hidden" <input>을 숨겨진 입력필드로 지정한다.
사용자가 보거나 수정할 수 없는 데이터를 포함하는 용도로 사용한다.
개발자 도구에서보거나 편집할 수 있으므로 보안의 형태로 사용해서는 안된다.
<input type="hidden" id="custId" name="custId" value="3487">

@<input form-*=" "> 속성

form <input>이 어느 <form>에 속하는지 지정한다. <input>의 form 속성과 <form>의 id 속성이 같아야 한다.
<form action="/action_page.php" id="form1">
<input type="text" id="lname" name="lname" form="form1">
formaction type="submit", type="image"와 함께 쓰이며, 데이터 제출 시 데이터를 어디로 보낼지 적는다.
<form>에서 지정한 action 속성보다 우선순위가 높다.
<input type="submit" formaction="/action_page2.php" value="Submit as Admin">
formenctype type="submit", type="image"와 함께 쓰이며, POST 메서드로 데이터를 서버에 제출할 경우 인코딩을 지정한다.
<form>에서 지정한 enctype 속성보다 우선순위가 높다.
<input type="submit" formenctype="multipart/form-data"   value="Submit as Multipart/form-data">
formmethod type="submit", type="image"와 함께 쓰이며, 데이터를 보낼 때 사용할 HTTP 메서드를 지정한다.
<form>에서 지정한 method 속성보다 우선순위가 높다.
<input type="submit" formmethod="post" value="Submit using POST">
formtarget type="submit", type="image"와 함께 쓰이며, form 제출 후 받은 응답을 어디에 표시할지 키워드를 적는다.
<form>에서 지정한 target 속성보다 우선순위가 높다.
<input type="submit" formtarget="_blank" value="Submit to a new window/tab">

@그 외 <input>이 가질 수 있는 속성

name <input>의 이름을 지정한다. name 속성은 JavaScript에서 요소나 제출된 데이터를 참조해올 때 사용한다.
form을 제출할 때, name 속성이 있는 요소만 값이 전달된다.
value <input>의 기본값을 지정한다.
placeholder
 <input>에 입력해야할 형식 샘플이나 간단한 설명을 힌트로 제공한다.
pattern  <input>의 입력값을 확인할 정규식을 지정한다. 예시 pattern="[A-Za-z]{3}" 
required  <input>을 필수로 작성해야 한다고 지정한다.
max, min, step <input>의 최댓값, 최솟값, 숫자간격을 지정한다.
maxlength, minlength <input>의 최대, 최소 문자 수를 지정한다.
size <input>의 너비 (문자)를 지정합니다
readonly  <input>을 읽기전용으로 지정한다. form 제출 시 때 읽기전용 필드의 값도 전송된다.
읽기전용 필드는 수정은 되지 않지만, 그 외 사용자와 상호작용(드래그, 복사 등)은 할 수 있다.
disabled <input>을 비활성화되도록 지정한다.
accept <input type="file>에서 선택할 수 있는 파일확장자를 지정한다.
alt <input type="img">에서 이미지의 대체 텍스트를 지정한다.
src <input type="img">에서 사용할 이미지의 URL을 지정한다.
checked type="checkbox", type="radio"과 함께 쓰이며, <input>의 기본(선택)값을 지정한다.
autocomplete text, search, url, tel, email, password, datepickers, range, and color 타입과 함께 쓰이며, <input>에 자동완성기능 on/off 여부를 지정한다. on으로 지정할 경우 이전에 입력했던 값을 드랍다운으로 표시해준다.
autofocus <input>이 페이지가 로드될 때 자동으로 포커스를 가지도록 한다.
dirname <input>의 텍스트방향을 지정할 수 있다. dirname의 `속성.dir`은 name '속성'과 같아야 한다.
(한글처럼 왼쪽에서 오른쪽으로 읽을지, 아랍어처럼 오른쪽에서 왼쪽으로 읽을지의 방향을 말한다.) 
list <input>에서 <datalist>에서 정의한 옵션을 사용한다. <input>의 list 속성과 <datalist>의 id 속성이 같아야 한다.
height, width 입력 필드의 높이와 너비를 지정한다.
multiple type="file", type="email"과 함께 쓰이며, 입력필드에 복수의 값을 입력할 수 있도록 지정한다.
저작자표시 비영리 변경금지 (새창열림)

'HTML' 카테고리의 다른 글

비주얼스튜디오 코드(Visual Studio Code)의 FONT와 TEXT  (0) 2023.02.23
비주얼스튜디오 코드(Visual Studio Code)의 SELECTOR(선택자)  (0) 2023.02.22
비주얼스튜디오 코드(Visual Studio Code)의 FORM  (0) 2023.02.20
비주얼스튜디오 코드(Visual Studio Code)의 하이퍼링크  (0) 2023.02.19
비주얼스튜디오 코드(Visual Studio Code)의 LIST  (0) 2023.02.18

※<form> 태그는 사용자로부터 데이터를 입력받을 때 사용하며, 사용자가 입력한 데이터를 데이터베이스에 입력하기 위하여 사용되는 필수 요소 중 하나입니다. 의도에 따라 다음의 11가지 태그들을 적절하게 조합해서 사용합니다.

전체적인 구조와 동작방식에 대해 알아보고 사용빈도와 중요도가 높은 <button> , <input> 태그들은 다음 시간에 조금 더 자세하게 알아보도록 하겠습니다.

 

목차

1. form의 기본구조 와 동작방식

2. form의 자식태그

3. form의 속성과 메서드

 

1. form의 기본구조와 동작 방식

@form의 기본구조

 

   @코드로 보기
    <form>
        <fieldset> <!--form 태그 내에 같은 요소들끼리 그룹화 시켜주는 요소-->
            <legend></legend> <!--그룹화 시킬 요소들의 이름-->
        </fieldset>
    </form>
 
 

 

@form의 동작 방식

(1) 사용자가 폼을 입력한 후 submit 하면 정보가 웹서버에 전송된다.

(2) 웹서버는 정보를 처리하고 대부분 정보는 데이터베이스(DB)에 저장된다.

(3) DB에서 CRUD 작업이 일어나고 작업 결과를 APP으로, WEB으로 전송합니다.

(4) 서버는 수신한 정보를 브라우저로 보낼 새로운 페이지를 만든다.

 

2. form의 자식태그

<button>  클릭 가능한 버튼이다. 기본 type은 submit이다. (사용빈도 높음)
<input>  22가지 type을 지원한다. 기본 type은 text이다. <form>과 가장 많이 쓰이는 요소 중 하나이다. (사용빈도 높음)
<label> <form>에 '라벨'을 달아주는 역할이다. 
<label> 의 for 속성과 <input> 의 id 속성이 서로 같거나 <label>의 자식으로 <input>을 두어야 한다.
<input>에 focus가 오면 스크린리더가 <label>을 읽기 때문에 접근성 측면에서 중요하다.
버튼이 너무 작더라도 <label>을 눌러 선택, 토글할 수 있어 유용하다.
<select> <option>의 드랍다운을 만들어준다. 기본값으로 가장 첫번째 <option>이 선택되며 직접 입력은 불가능하다.
size 속성으로 드랍다운이 아니라 한 번에 여러 개를 보여주는 스크롤로 만들 수 있다.
<optgroup> <select>를 카테고리별로 묶을 수 있다.
<datalist> <option>의 드랍다운을 만들어준다. 검색기록 자동완성과 같이 직접 입력이 가능하다.
<datalist> 의 id 속성과 <input> 의 list 속성이 서로 같아야 한다.
<option> 드랍다운 리스트에 어떤 옵션을 담을지 정의한다. value 속성을 가진다.
<fieldset> <form> 에서 관련 요소를 그룹화할 때 사용한다. 관련 요소 주위에 상자를 그려준다.
<legend> <fieldset> 요소 첫번째 자식으로 <fieldset> 그룹을 설명하는 캡션 역할을 한다.
<output> <form>의 oninput속성에 있는 계산을 수행하고 결과를 <output> 요소에 표시한다.
<textarea> 여러 줄을 입력할 수 있는 텍스트필드이다. rows 속성은 몇 줄 보일지를, cols 속성은너비를 지정해준다.

 

3. form의 속성과 메서드

 

@form의 속성

name <form> 의 이름을 적는다. (text)
autocomplete 자동완성 기능 사용여부를 지정한다. (on, off)
novalidate 제출 시 입력된 값의 유효성을 검사하지 않도록 지정한다. (novalidate)
action  <form> 제출 시 데이터를 어디로 보낼지 적는다. (URL)
method  데이터를 보낼 때 사용할 HTTP 메서드를 지정한다. (get, post)
charset <form> 제출 시 사용할 문자 인코딩을 지정한다. (character_set)
enctype POST 메서드로 데이터를 서버에 제출할 경우 인코딩을 지정한다.
(application/x-www-form-urlencoded, multipart/form-data, text/plain)
target form 제출 후 받은 응답을 어디에 표시할지 키워드를 적는다.
(_blank, _self, _parent, _top)
rel 현재 문서와 연결된 리소스 간의 관계를 적는다.
(external, help, license, nofollow, noopener, noreferrer, opener, prev, next, search)

 

@form의 메서드

reset() <form> 내부의 모든 값(value)을 초기화해준다. 초기화 버튼(<button type="reset">)을 클릭한 것과 같은 효과이다.
기본값(default value)을 지정해놨다면 이 값으로 다시 초기화된다.
submit() <form> 을 제출한다. 제출 버튼(<button type="submit">)을 클릭한 것과 같은 효과이다.

 

저작자표시 비영리 변경금지 (새창열림)

'HTML' 카테고리의 다른 글

비주얼스튜디오 코드(Visual Studio Code)의 SELECTOR(선택자)  (0) 2023.02.22
비주얼스튜디오 코드(Visual Studio Code)의 FORM_INPUT과 BUTTON  (0) 2023.02.21
비주얼스튜디오 코드(Visual Studio Code)의 하이퍼링크  (0) 2023.02.19
비주얼스튜디오 코드(Visual Studio Code)의 LIST  (0) 2023.02.18
비주얼스튜디오 코드(Visual Studio Code)의 TABLE  (0) 2023.02.17

+ Recent posts

티스토리툴바