Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

프로그래밍 삽질 중

HTML&CSS 정리(4) 상태 선택자 ~ 글자 속성 본문

과거 프로그래밍 자료들/Html&CSS

HTML&CSS 정리(4) 상태 선택자 ~ 글자 속성

평부 2021. 4. 2. 19:28

※ 상태 선택자
1) :checked : 체크 상태의 input 태그 선택
2) :focused : 포커스를 맞춘 input 태그 선택
3) :enabled : 사용 가능한 input 태그 선택
4) :disabled : 사용 불가능한 input 태그 선택

※ 구조 선택자
1) :first-child : 형제 관계에서 첫 번째로 등장하는 태그 선택
2) :last-child : 형제 관계에서 마지막으로 등장하는 태그 선택
3) :nth-child(수열) : 형제 관계에서 앞에서 수열 번째 등장하는 태그 선택
4) :nth-last-child(수열) : 형제 관계에서 뒤에서 수열 번째 등장하는 태그 선택

* 2n+1 수열에 0부터 넣을 경우 → 1, 3, 5, 7, 9, 12...
- 구조 선택자는 수열의 결과 값에 해당하는 위치에 있는 태그에 스타일 적용

※ float
- 화면을 구성하는 요소 간의 관계를 고려하여 각 요소에 배치하는 방법

※ float 속성 값
1) inherit : 요소를 감싸는 부모 요소의 float 속성을 상속
2) left : 요소를 왼쪽에 떠 있는 상태로
3) right : 요소를 오른쪽에 떠 있는 상태로
4) none : float 속성 적용 x
5) clear : float 속성이 적용x하도록 사용
6) overflow : auto 설정 시 이미지가 박스 영역을 벗어나는 현상 해결함
    - hidden : 영역을 벗어나는 부분을 감춤
    - srcoll : 영역을 벗어나는 부분을 스크롤로 만듦


※ z-index
- 한 요소 위에 다른 요소를 쌓을 때 발생
- 속성값이 작을수록 아래에 쌓임(2>1>0>-1>-2)

※ 글자 속성
- font-size : 글자 크기
- font-family : 글꼴 지정
- font-style : 글자의 스타일
- font-weight : 글짜 두께
- text-align : 글자 정렬지정(center : 중앙)
- line-height : 글자 수직 중앙 정렬

 

[예시 1] - 상태선택자, 조합선택자, 구조선택자(서브웨이 메뉴 선택하기)

Blog_Ex1.html
0.00MB

[예시 1 답] 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
input:checked {
    height:20px;
    width: 20px;
}
input:enabled {
    background-color:rgb(153, 255, 153);
}
input:disabled {
    background-color:white;
}
input-focus {
    background-color: #00CC00;
}
li:first-child {
    color:red; font-weight: bold;
}
li:last-child {
    color:green; font-weight: bold;
}
li: nth-child(2n) {
    background-color:rgb(204, 255, 204)
}
li: nth-child(2n+1) {
    background-color:#ffffff;
}
</style>
<title>Insert title here</title>
</head>
<body>
<form action="">
    <h1>서브웨이 샌드위치 종류</h1>
    <h3>클래식 샌드위치</h3>
    <input type="radio" checked="checked" value="classic_menu1">에그마요<br>
    <input type="radio" value="classic_menu2">이탈리안 비엠티<br>
    <input type="radio" value="classic_menu3">비엘티<br>
    <input type="radio" value="classic_menu4">미트볼<br>
    <input type="radio" value="classic_menu5">햄<br>
    <input type="radio" value="classic_menu6">참치<br>
    <p></p>
    <h3>프레쉬&라이트 샌드위치</h3>
    <ul>
        <li>로스트 치킨 베이컨</li>
        <li>로스트 치킨 아보카도</li>
        <li>로스트 치킨</li>
        <li>로티세리 바베큐 치킨</li>
        <li>서브웨이 클럽</li>
        <li>터키</li>
        <li>베지</li>
    </ul>
    <h3>추가 메뉴</h3>
    <input type="checkbox" checked="checked" value="add_menu1">미트<br>
    <input type="checkbox" checked="checked" value="add_menu2">쉬림프 더블업<br>
    <input type="checkbox" checked="checked" value="add_menu3">에그마요<br>
    <input type="checkbox" checked="checked" value="add_menu4">오믈렛<br>
    <input type="checkbox" checked="checked" value="add_menu5">아보카도<br>
    <input type="checkbox" checked="checked" value="add_menu6">베이컨<br>
    <input type="checkbox" checked="checked" value="add_menu7">페페로니<br>
    <input type="checkbox" checked="checked" value="add_menu8">치즈<br>
    <p></p>
</form>
    <h4>주문 가능</h4>
    <input>
    <h4>주문 불가능</h4>
    <input disabled="disabled">
</body>
</html>
 cs

 

 

[예시 2] - float (서브웨이의 역사)

blog_ex2.html
0.00MB

 

[예시 2 답]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
    img {
        float:left;
        margin : 0 0 10px 10px;
    }
    .img2 {
        float:right;
        overflow: auto;
    }
  
    .div1{
        float:left;
        width:200px; height:450px;
        margin:10px;
        border: 3px solid #669966
    }
    .div2 {
        border: 1px solid red;
        clear: left;
    }
  .fix {
    overflow: auto;
  }
</style>
<title>Insert title here</title>
</head>
<body>
  <div class="fix">
    <p>서브웨이의 역사</p>
    <p><img src="images/sandwiches.jpg" alt="images width="150" height="150">
    <ul>
        <div class="div1">
        <li><b>1965</b><br> 17세 사업가, 프레드 델루카 Pete’s Super Submarines 오픈(미국, 코네티컷)</li>
        <li><b>1968</b><br>공식명칭 '서브웨이' 사용 시작</li>
        <li><b>1975</b><br>클래식 BMT출시</li>
        <li><b>1983</b><br>매장에서 직접 구워낸 신선한 빵 제공 시작</li>
           <p><img class="img2" src="images/sandwiches2.jpg" alt="sandwiches" width="100" height="100">
        <li><b>1984</b><br>단체 고객을 위한 파티플래너 상품 출시</li>
        <div class="div2">
        <li><b>1981-1987</b><br>프렌차이즈를 통한 글로벌 사업 확장</li></div>
      </div>
      </ul>
      </p>
      </div>
</body>
</html>
 cs

[예시 3] - 서브웨이 설명

blog_ex3.html
0.00MB

 

[예시 3 답]

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
  div#wrapper{
    position:relative;
  }
  #b1 {
   height: 80px;
   position: relative;
   width: 150px;
   height: 210px;
   top:90px;
   left:100px;
   border: 1px dashed #669966;
   background-color: #ffff66;
   padding-left: 5px; 
  }
  #b2 {
   opacity: 0.8;
   z-index: 1;
   position: absolute;
   width: 150px;
   height: 200px;
   top: 20px;
   left: 170px;
   border: 1px dashed #990000;
   background-color: #339933;
   text-align: center;
  }
  #b3 {
   opacity: 0.8;
   z-index: 2;
   position: absolute;
   width: 200px;
   height: 130px;
   top: 50px;
   left: 200px;
   border: 1px dashed #000099;
   background-color: #cc3333;
   text-align: left;
   padding-left: 10px;
    }
     .a { font-size: 32px; }
    .arial { font-family: Arial; }
    .italic_bold { font-style: italic; font-weight: bold; }
    .bold { font-weight : bold; }
    .date { text-aligen : right; }
    .button {
        width:150;
        height: 70;
        background-color: #99ccff;
        border:10px solid #ffffff;
        border-radius: 30px;
        box-shadow: 5px 5px 5px #a9a9a9;
    }  
    .button>a {
        display: block;
        line-height: 70px;
    }
    .center { text-align: center; }
</style>
<title>Insert title here</title>
</head>
<body>
<div id="wrapper">
    <div class="box" id="b1">계란</div>
    <div class="box" id="b2">아보카도</div>
    <div class="box" id="b3">베이컨</div>
    <p></p>
    <br>
    <br>
    <p class="bold date">2021.04.02</p>
    <h2 class="arial">엄격하게 관리되는 우리의 재료</h2>
    <p class="a">매일 매장에 배송되는 신선한 야채들은 각 매장에서 정성스럽게 손질됩니다.<br>
                엄격한 규율에 따라 세척 과정을 거친 야채들은<br>
                당일 판매되는 양만큼 준비되며 언제나 신선한 최상의 야채를<br>
                안전하게 제공하는 것이 써브웨이의 목표입니다.</p>
     <h2 class="italic_bold">서브웨이만의 특별한 빵</h2>
     <p class="a">1983년부터 써브웨이는<br>
                     각 매장에서 매일 직접 구워 낸 신선한 샌드위치 빵을 제공합니다.<br>
                    신선한 샌드위치는 신선한 빵에서 시작된다는 철학으로<br>
                    매일 최상의 샌드위치 빵을 제공하기 위해 노력하고 있습니다.</p>
    <div class="button">
        <a href="#" class="center">더 자세한 내용 클릭하기</a>
    </div>
                    
</body>
</html>
 cs
저작자표시 비영리 변경금지

'과거 프로그래밍 자료들 > Html&CSS' 카테고리의 다른 글

HTML&CSS 정리(6) 변화 속성 ~ 반응형 웹(media 관련)  (0) 2021.04.06
HTML&CSS 정리(5) 표 레이아웃 속성 ~ 2차원 변환 함수  (0) 2021.04.05
HTML&CSS (3) 기본선택자 ~ 조합선택자  (0) 2021.04.05
HTML&CSS 정리 (2) 데이터전달(get, post)~ HTML5 입력요소  (0) 2021.04.01
HTML&CSS 정리 (1) h시리즈 ~ span  (0) 2021.04.01
'과거 프로그래밍 자료들/Html&CSS' Related Articles more