※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

※하이퍼 링크란 다른 페이지나 사이트로 연결하는 링크(문자 또는 이미지)를 말합니다.

A태그를 사용하며 '<a href="사이트 또는 이동할 문서의 위치"> 링크에 사용될 문자 또는 이미지 </a>' 형식으로 사용합니다. 텍스트, 이미지, 버튼 등의 형태에 링크를 걸어 사용할 수 있습니다.

목차

1. A태그의 속성

2. A태그의 사용

3. A태그의 속성 값 변경

 

1. A 태그의 속성

@<a>

<a>는 'anchor', 즉, '닻'이라는 뜻입니다.

우리는 보통 인터넷 서핑, 웹서핑이라는 말을 많이 사용하는데 인터넷, 정보의 바다를 항해한다고도 표현합니다.

인터넷에서 정보의 바다를 항해하는 것은 대부분 링크를 클릭함으로써 이루어집니다.

그런 의미에서 html에서 링크를 표현하기 위해서 'anchor'의 약자인 <a> 태그를 사용합니다.

 

@href

링크를 클릭했을 때 이동할 페이지를 href 속성에 표현합니다.

href는 'Hypertext Reference'의 약자입니다.

 

@target

링크를 클릭했을 때 이동할 페이지를 띄울 위치를 지정해 줍니다.

 target의 속성은

 

_blank : 새 창이나 탭에 링크된 페이지를 보여준다.

_self : 현재 창에 링크된 페이지를 보여준다.

_parent : 부모 프레임에 링크된 페이지를 보여준다.

_top : 해당 프레임을 포함한, 최고 상단 페이지에 링크된 페이지를 보여준다.

페이지를 띄울 프레임 이름 : 사용자가 지정한 프레임에 링크된 창을 띄운다.

 

정리하면 아래와 같은 구조로 사용하게 됩니다.

'<a href="사이트 또는 이동할 문서의 위치" target="페이지를 띄울 위치"> 링크에 사용될 문자 또는 이미지 </a>'

 

2. A태그의 사용

@코드로 보기

<a href="https://www.naver.com/" target="_blank">네이버로 이동</a>

위와 같이 작성하게 되면 '네이버로 이동'이란 텍스트를 클릭하면 '_blank' 값에 의해 새창으로 네이버가 연결되게 됩니다.

 

<a href="https://www.naver.com/" target="_blank"><img src="이미지_경로"></a>
또는 이미지를 넣어주고 이미지를 클릭시 이동할 수 있도록 링크를 걸 수도 있습니다.

 

 

 

3. A태그의 속성 값 변경

하이퍼링크는 기본적으로 방문이 되지 않았을 때에는 파란색, 방문이 되었을 때는 자주색으로 표현되며 밑줄을 가지고 있습니다. 기능적으로 편리하기는 하나 보기에 좋지 않은 경우가 많은데 그러한 속성 값들을 변경하는 방법들을 알아보겠습니다.

 

@ text-decoration-line 속성 (하이퍼링크 밑줄 없애기)

text-decoration-line 속성은 선이 생성되는 위치를 변경하는 값입니다.

주로 하이퍼링크의 밑줄을 없애기 위해서  'text-decoration-line' 속성을 none으로 지정하여 사용합니다.

text-decoration-line 속성은 다음의 4가지 값을 가질 수 있습니다.

  • none : 선 없음
  • underline : 밑줄
  • overline : 윗줄
  • line-through : 취소선

밑줄과 윗줄, 취소선을 동시에 적용할 수도 있습니다.

 

@코드로 보기

   <style>     
        a {
            text-decoration-line: none;
        }
   </style> 

위와 같이 <style></style> 탭에 a태그에 대한 설정 값을 넣어 주거나

 

@코드로 보기

<a href="https://www.naver.com/" target="_blank" style="text-decoration-line: none;">네이버로 이동</a>

a태그 안에 직접 속성값을 넣어주시면 됩니다.

 

 

@ text-decoration-style 속성

text-decoration-style 속성은 선의 모양을 바꾸기 위하여 사용합니다.

text-decoration-style 속성은 다음의 5가지 값을 가질 수 있습니다.

사용방식은 text-decoration-line 속성의 방식과 같습니다.

  • 실선　text-decoration-style: solid;
  • 점선　text-decoration-style: dotted;
  • 굵은 점선 text-decoration-style: dashed;
  • 이중선　text-decoration-style: double;
  • 물결선　text-decoration-style: wavy;
저작자표시 비영리 변경금지 (새창열림)

'HTML' 카테고리의 다른 글

비주얼스튜디오 코드(Visual Studio Code)의 FORM_INPUT과 BUTTON  (0) 2023.02.21
비주얼스튜디오 코드(Visual Studio Code)의 FORM  (0) 2023.02.20
비주얼스튜디오 코드(Visual Studio Code)의 LIST  (0) 2023.02.18
비주얼스튜디오 코드(Visual Studio Code)의 TABLE  (0) 2023.02.17
비주얼스튜디오 코드(Visual Studio Code)의 기본코드  (0) 2023.02.16

+ Recent posts

티스토리툴바