선택자 : 어떤 HTML요소에 디자인을 적용 할 것인지 선택하는 곳 속성 : 해당 요소의 어떤 속성을 설정 할 것인지 선택하는 곳 값 : 해당 속성에 대한 원하는 값을 적는 곳
모든 h3태그 요소에 스타일을 적용하고 싶은 경우
h3 {
color: rgba(87, 27, 199, 0.329);
}
모든 li태그를 지닌 요소에 스타일을 적용
li {
color: orangered;
background-color: aliceblue;
}
모든 ul태그를 지닌 요소에 스타일을 적용
ul {
background-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_CSS.html</title>
<style>
/* CSS문법이 적용되는 영역 */
/*
요소선택(Selector) {
디자인속성(property) : 디자인값(property value)
}
선택자 : 어떤 HTML요소에 디자인을 적용 할 것인지 선택하는 곳
속성 : 해당 요소의 어떤 속성을 설정 할 것인지 선택하는 곳
값 : 해당 속성에 대한 원하는 값을 적는 곳
*/
/* 모든 h3태그 요소에 스타일을 적용하고 싶은 경우*/
h3 {
color: rgba(87, 27, 199, 0.329);
}
/* 모든 li태그를 지닌 요소에 스타일을 적용*/
li {
color: orangered;
background-color: aliceblue;
}
/* 모든 ul태그를 지닌 요소에 스타일을 적용*/
ul {
background-color: black;
}
</style>
</head>
<body>
<h3># CSS (Cascading Style Sheet)</h3>
<ul>
<li>CSS는 해당 웹 페이지의 디자인을 담당하는 스타일시트를 작성하는 문법이다</li>
<li>스타일시트에는 해당 웹 페이지의 특정 요소가 사용자에게 어떤 모습으로 보여야 할지를 정의해 둔다</li>
<li>웹 브라우저는 스타일 시트를 확인하고 해당 요소를 어떻게 그려야 할지를 판단하여 그린다</li>
<li>스타일시트로 모든 디자인을 원하는대로 변경 할 수 있기 때문에 HTML의 기본 디자인은 거의 의미가 업고,
해당 HTML태그의 의미가 더 중요하다
</li>
</ul>
</body>
</html>
#box2 div {
color: chartreuse;
background-color: crimson;
}
띄어쓰기로도 가능하다
,를 사용해 다중 선택도 가능하다
#list-item1, #list-item6 {
color: black;
}
전체 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02_선택자(Selector).html</title>
<style>
/* tagName : 해당 태그 이름을 지닌 모든 요소를 선택 */
body {
font-size: 30px;
background-color: rgb(13, 43, 78);
color: white;
}
/*
#id : 해당 id를 지닌 요소만 선택
※ 프래그래밍 언어에서 -를 그냥 사용하면 연산자이지만
HTML과 CSS에서는 연산자가 아닌 문자로 사용된다
*/
#list-item3 {
color: orange;
}
/*
.className : 클래스 속성값으로 요소들을 선택 할 수 있다
※ id 속성은 단 하나의 요소만 선택 할 수 있지만
class 속성은 선택시 여러개의 요소가 선택된다고 생각해야 한다
*/
.drink {
text-decoration: underline double 2px aqua;
}
div {
border: solid white 3px;
padding: 10px;
}
div > div {
border-color: black;
}
/* #box1 내부의 자식 div들을 선택*/
#box1 {
color: black;
}
#box1 > div {
color: red;
background-color: aqua;
}
/* #box2 내부의 자손 div를 선택 */
#box2 div {
color: chartreuse;
background-color: crimson;
}
/* ,를 사용해 다중 선택 */
#list-item1, #list-item6 {
color: black;
}
</style>
</head>
<body>
<h3># CSS 선택자</h3>
<ul>
<li>tagName : 해당 태그 이름의 모든 요소 선택</li>
<li>#id : 해당 id를 지닌 요소 하나만 선택</li>
<li>.className : 해당 class값을 지닌 모든 요소 선택</li>
<li>* : 모든 요소 선택</li>
<li>> : 해당 요소의 자식 요소 선택(정확하게 자식 요소만)</li>
<li>공백 : 해당 요소의 자손 요소 선택(내부에 있는 모든 요소가 자손)</li>
<li>, : 여러개의 선택자를 사용</li>
<li><a href="https://flukeout.github.io/"> 선택자 연습하러가기 </a></li>
</ul>
<hr>
<ul>
<li id="list-item1" class="drink">콜라</li>
<li id="list-item2" class="drink">사이다</li>
<li id="list-item3" class="drink">환타</li>
<li id="list-item4" class="drink">홍차</li>
<li id="list-item5" class="drink">우롱차</li>
<li id="list-item6" class="car">소나타</li>
</ul>
<hr>
<!-- div: 그냥 블록 요소를 하나 만들고 싶을때 사용-->
<div id="box1">
<div>
1
<div>1-1</div>
<div>1-2</div>
</div>
<div>2</div>
<div>3</div>
</div>
<div id="box2">
<div>
1
<div>1-1</div>
<div>1-2</div>
</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
input 태그의 placeholder 속성에 값을 설정해 놓으면 무엇을 입력해야 하는지 알려 줄 수 있다
input 태그의 readonly 속성을 추가해 놓으면 수정이 불가능해진다 (읽기 전용)
input 태그의 disabled 속성을 추가해 놓으면 비활성화된다
<table border="1">
<tr>
<th>타입</th>
<th>예시</th>
<th>설명</th>
<th>용도</th>
</tr>
<tr>
<td>type="text"</td>
<td>
<input type="text"> <br>
<input type="text" value="안녕하세요!"> <br>
<input type="text" placeholder="이름을 입력하세요 !"> <br>
<input type="text" value="읽기 전용입니다." readonly> <br>
<input type="text" value="비활성화입니다." disabled> <br>
</td>
<td>일반적인 텍스트 입력란</td>
<td></td>
</tr>
<tr>
<td>type="password"</td>
<td><input type="password"></td>
<td>비밀번호를 가려주는 비밀번호 입력란</td>
<td>비밀번호, 글 비밀번호</td>
</tr>
<tr>
<td>type="color"</td>
<td><input type="color"></td>
<td>색상 선택</td>
<td></td>
</tr>
<tr>
<td>type="rado"</td>
<td>
<b>종교를 고르세요</b>: <br>
<input type="radio" name="religion" id="Christianity">
<label for="Christianity">기독교</label> <br>
<input type="radio" name="religion" id="Buddhism">
<label for="Buddhism">불교</label> <br>
<input type="radio" name="religion" id="no_religion">
<label for="no_religion">무교</label> <br>
<hr>
<b>이동수단</b> <br>
<input type="radio" name="transport" id="car">
<label for="car">자동차</label> <br>
<input type="radio" name="transport" id="public_transport">
<label for="public_transport">대중교통</label> <br>
<input type="radio" name="transport" id="walk">
<label for="walk">도보</label> <br>
</td>
<td>
여러개의 선택 중 하나만 선택해야하는 경우 <br>
name 속성을 사용하여 하나의 카테고리로 묶어줘야 제대로 동작한다 <br>
label 태그를 사용하여 해당 라벨을 클릭하면 버튼이 선택되도록 설정할 수 있다 <br>
이 때 label의 for 속성을 해당 버튼의 id 속성값으로 설정해야 한다 <br>
</td>
<td>성별, 나이 등</td>
</tr>
<tr>
<td>type="checkbox"</td>
<td>
<b>취미를 선택해주세요</b> <br>
<input type="checkbox" name="hobbies" id="music">
<label for="music">음악감상</label> <br>
<input type="checkbox" name="hobbies" id="book">
<label for="book">독서</label> <br>
<input type="checkbox" name="hobbies" id="movie">
<label for="movie">영화감상</label> <br>
<input type="checkbox" name="hobbies" id="meditate">
<label for="meditate">명상</label> <br>
</td>
<td>
같은 카테고리 내에서 여러가지를 동시에 선택 할 수 있는 버튼 <br>
radio랑 다르게 같은 name으로 묶어도 다중 선택 가능하다 <br>
</td>
<td>
관심분야 등
</td>
</tr>
<tr>
<td>type="date"</td>
<td><input type="date"></td>
<td>날짜를 입력받을 수 있다</td>
<td></td>
</tr>
<tr>
<td>type="file"</td>
<td><input type="file"></td>
<td>사용자의 컴퓨터에서 파일을 선택 할 수 있다</td>
<td>파일 첨부, 프로필 사진 등록 등</td>
</tr>
<tr>
<td>type="hidden"</td>
<td><input type="hidden" name="id" value="103"></td>
<td>사용자에게는 보이지 않게 값을 숨겨 놓을 수 있다</td>
<td>굳이 보여 줄 필요 없는 내용들을 숨길 때 사용</td>
</tr>
<tr>
<td><textarea></td>
<td>
<textarea cols="35" rows="10"></textarea>
</td>
<td>
많은 앙의 텍스트를 입력할 때 사용하는 태그 <br>
input 태그와 다르게 value 속성을 사용하지 않고 요소의 내용이 value가 된다 <br>
</td>
<td>글 내용</td>
</tr>
<tr>
<td><select>, <option></td>
<td>
<b>Select your job!</b> <br>
<select name="job_ID">
<option value="IT_PROG">IT Programming</option>
<option value="FI_ACCOUNT">Finace Account</option>
<option value="ST_CLERK">Store Cleck</option>
</select>
</td>
<td>주어진 여러 선택 중 하나를 선택 할 수 있는 태그</td>
<td>주로 외래키 컬럼에 사용된다 (주어진 것 중 하나를 선택해야 하는 경우)</td>
</tr>
</table>
- src 속성 : 출력하고자 하는 이미지의 경로 - alt 속성 : 해당 이미지에 대한 설명 (이미지 출력 실패시 대신 출력되는 문구) - width 속성 : 이미지 너비 - height 속성 : 이미지 높이 - alt 속성은 화면 읽어주는 프로그램(Screen Reader)에서 그림을 읽을 때 사용하는 속성이기 때문에 반드시 채워놓아야 한다
대부분의 HTML 태그들은 의미만 지니고 있는 경우가 많다 (HTML은 웹 페이지의 뼈대 역할)
<code></code> : 일반 텍스트와 차별되게 출력되며 가독성이 높아진다
<code> class Main { public static void main(String[] args) { System.out.println("Hello, world!"); } } </code>
code태그로 출력
p태그로 출력 문단 내부에서 글자를 꾸며주는 태그들
b : 글자를 굵게 strong : 중요한 내용 i : 이텔릭체 (나중에 아이콘이라는 의미로 변질됨) mark : 형광펜으로 표시 del : 취소선 ins : 밑줄로 강조 sub : sub text ( 작은 글씨 아래로 ) sup : super text ( 작은 글시 위로 )
