231016_HTML과 CSS

Coding Class 2023. 10. 16. 16:39

HTML에 대한 진도는 기본적으로 다 나갔기 때문에 CSS 진행..

마우스를 올리면 (호버) 밑줄이 사라지고 색을 브라운으로 바꿈.

클릭하는 순간 박스 생성

인풋 텍스트창을 포커스하면 백그라운드 색상이 바뀜

HTML 변경하는 방법은 다양함. class, id 등을 통해 변경할 수 있으나, class 는 중복이 되지만 id는 중복이 안된다는 차이가 있음을 알고 적절하게 사용하는것이 중요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>맞춤훈련센터 소개</title>
  <link rel="stylesheet" href="./CSS/main_1016.css">
</head>
<body>
  <div>
    <h1>맞춤훈련센터 소개</h1>
  </div>
  <div>
    <h3>개요</h3>
    <ul class="num1">
      <li>맞춤훈련센터는 기업의 실제수요를 반영하여 교과과정 설계부터 훈련생 선발, 맞춤훈련, 취업에 이르기까지 전 과정을 기업과 연계하여 진행하는 직업훈련 전문기관입니다.</li>
    </ul>
  </div>
  <div>
  <h3>맞춤훈련 효과</h3>
    <ul>
      <li>기업의 사회적 책임 역할 수행으로 기업 이미지 제고</li>
      <li>취업과 동시에 바로 현장 배치 및 즉시 가용 인력 활용</li>
      <li>재교육에 대한 시간 및 경비절감</li>
      <li>기업체가 필요로 하는 훈련생 평가 선발 및 교과과정 설계 직접 참여</li>
      <li>현장실무중심의 교과 편성 및 운영, 적응 만족도 제고</li>
    </ul>
  </div>
<div>
<h3>훈련특전</h3>
  <ul>
    <li>교육훈련비용 전액 무료 (교재 및 실습재료 포함)</li>
    <li>훈련참여수당 (취업성공패키지 참여시, 월 최대 284,000원 ) 및 교통비, 식비 지급<br>
    <span style="color: red;">*수당 충족 요건 해당자에 한하여 지급</span></li>
    <li>중식 지원</li>
    <li>상해보험가입 융복합훈련, 특화훈련, 맞춤훈련, 직업훈련준비과정에 한함</li>
    <li>일부지역 통학버스 제공</li>
  </ul>
</div>
<div>
<h3>문의 및 접수처</h3>
<table>
  <tr>
    <th>맞춤센터</th><th>전화번호</th><th>FAX</th><th>홈페이지 바로가기</th>
  </tr>
  <tr>
    <td>서울맞춤훈련센터</td>
    <td>02-2262-0900</td>
    <td>02-2262-0999</td>
    <td><a href="https://www.kead.or.kr/campus/slcthome/cntntsPage.do?menuId=MENU1022" target="_blank">서울맞춤훈련센터 바로가기</a></td>
  </tr>
  <tr>
    <td>인천맞춤훈련센터</td>
    <td>032-363-1400</td>
    <td>050-3470-0061</td>
    <td><a href="https://www.kead.or.kr/campus/iccthome/cntntsPage.do?menuId=MENU1017" target="_blank">인천맞춤훈련센터 바로가기</a></td>
  </tr>
  <tr>
    <td>천안아산맞춤훈련센터</td>
    <td>041-537-5600</td>
    <td>050-3470-0077</td>
    <td><a href="https://www.kead.or.kr/campus/cacthome/cntntsPage.do?menuId=MENU1027" target="_blank">천안아산맞춤훈련센터 바로가기</a></td>
  </tr>
  <tr>
    <td>전주맞춤훈련센터</td>
    <td>063-219-4000</td>
    <td>050-3470-0062</td>
    <td><a href="https://www.kead.or.kr/campus/jjcthome/cntntsPage.do?menuId=MENU1032" target="_blank">전주맞춤훈련센터 바로가기</a></td>
  </tr>
  <tr>
    <td>창원맞춤훈련센터</td>
    <td>055-220-7200</td>
    <td>050-3470-0707</td>
    <td><a href="https://www.kead.or.kr/campus/cocthome/cntntsPage.do?menuId=MENU1037" target="_blank">창원맞춤훈련센터 바로가기</a></td>
  </tr>
  <tr>
    <td>제주맞춤훈련센터</td>
    <td>064-717-6700</td>
    <td>050-3470-0063</td>
    <td><a href="https://www.kead.or.kr/campus/jjucthome/cntntsPage.do?menuId=MENU1042" target="_blank">제주맞춤훈련센터 바로가기</a></td>
  </tr>
</table>
</div>
<div>
  <label>열람하신 정보에 만족하십니까?</label>
  <input type="radio" name="choice"> 😄 매우만족
  <input type="radio" name="choice"> 😃 만족
  <input type="radio" name="choice"> 😐 보통
  <input type="radio" name="choice"> 🙁 불만
  <input type="radio" name="choice"> 😡 매우불만
  <button type="button">확인</button>
  <p>담당자 조용성 전화번호 031-728-7324 FAX </p>
</div>
</body>
</html>

body {
  color: #2c2c2c;
}
table{
  border: 1px solid black;
  border-collapse: collapse;
  width: 800px;
}
tr{
  height: 50px;
}
th, td{
  border: 1px solid black;
}
h3 { 
  color: brown;
}
.num1 {
  background-color: plum;
}
ul li:nth-child(even) {
  color: orange;
}
a{
  text-decoration: none;
}
a:hover {
  color:brown;
  text-decoration: underline;
}

table tr:first-child th {
  background-color: rgb(196, 196, 196);
}

table tr:nth-child(odd) {
  background-color: cadetblue;
}

짝수지정은 2n, 홀수지정은 2n+1로도 할 수 있음.

적용은 차례대로 되지만, div 에 !important; 가 있으므로 하위 태그는 적용되지 않음.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./CSS/161pg.css">
</head>
<body>
  <div class="box1">
    font-size:1.2em 14px*1.2 = 16.8
    <div class="box2">
      font-size:1.2em 16.8px*1.2 = 20.16
      <div class="box3">
        font-size:1.2em 20.16px*1.2 = 24.19
      </div>
    </div>
  </div>
  <div class="box4">box4</div>
  <div class="box5">box5</div>
</body>
</html>

body{
  text-align: center;
  font-size: 14px;
}

div{
  font-size: 120%;
  /*14px*1.2=16.8px*/
  font-weight: bold;
  padding: 1em;

}
.box1{
  background-color: orange;
}
.box2{
  background-color: red;
}
.box3{
  background-color: purple;
}
.box4 {
  width: 50vw;
  height: 50vh;
  background-color: blue;
}

반응형 웹페이지를 만들 떈 단위를 vw, vh로 사용하면 됨.

반응형 웹디에서는 주로 %, em, vw, vh 와 같은 상대크기를 주로 사용

저작자표시

'Coding Class' 카테고리의 다른 글

231017_Java (0)	2023.10.17
231012_Java (0)	2023.10.17
231013_DB 설계와 SQL 활용 (0)	2023.10.13
231012_Java (0)	2023.10.13
231012_JAVA (0)	2023.10.12

ABOUT ME

2023 디지털 코딩 아카데미 2023 디지털 코딩 아카데미

'Coding Class' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'Coding Class' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바