class로 접근하는 방법이 있습니다. .을 붙히면 class 명을 찾아가라는 것 입니다.
body.main의 경우 body태그 안에 main이라는 class 명에다가 이 CSS를 적용시키겠다는 말입니다.
id명으로 접근할 수 있습니다. 이 경우에는 #을 씁니다.
어디안에 어디안에 어디라고 지정할 때 ul이란 할아버지에 li이라는 아버지에 strong이라는 자손입니다.
div이란 아버지의 strong이라는 자식입니다.
어떤 조건이나 상황에서 스타일을 적용하도록 만든 셀렉터입니다.
40개 이상의 많은 가상 클래스 셀렉터 있으니 한번 쭉 보면서 자주 쓰일 거 같은 건 메모를 하든 기억을 하는게 좋다고 생각됩니다.
@import url을 이용해 불러올 수 있습니다. 또는 <link rel = "stylesheet"href="mystyle.css"> 로 불러올 수 있습니다.
따로 css를 안 만들고 html 안에 넣을 수 도 있습니다. <style> </style>
<a href=“http://www.naver.com” style=”text-decoration : none”>네이버</a>
태그 안에다가 style을 지정할 수도 있습니다.
속성 : 값
앞에서 알려준 거 와 같이 클래스로 접근할지 id로 접근할지 그 자체 태그로 접근할지에 따라
이름을 정해주고 중괄호 안에 적용시킬 목록을 적습니다.
#two{
color:blue;
}
.three{
color:green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div>
<div style="color:red">안녕하세요</div>
</div>
<div>
<div id = "two">안녕하세요</div>
</div>
<div>
<div class="three">안녕하세요</div>
</div>
</body>
</html>
<link rel="stylesheet" href="style.css"> 이렇게 해당 분리한 파일을 지정시킬 수 있습니다.
파일로 별도 분리하고 클래스별로 적용시키면 (웬만해서 클래스명으로 지정함) 유지보수에 매우 용이합니다.
#로 id나 .으로 클래스를 지정할 수 있습니다.
------------ 인라인 스타일 요소 --------
<div style="border-color: red;">
-------- id 셀렉터 -----------
#leftBanner{
background-color: black;
color:white;
height :100%;
}
-------- 클래스 셀렉터 -----------
.leftBanner{
background-color: black;
color:white;
height :100%;
}
-------- 요소 스타일 -----------
<style>
div{
border-color:black;
border-width:10px;
border-style:solid;
}
</style>인라인 스타일시트 > id셀렉터 > 클래스셀렉터 > 요소 스타일순입니다. 가장 먼저 인라인 스타일이 가장 마지막에 적용되서 최종적으로 나옵니다.
같은 속성을 여러번 정의했을 때 우선순위가 높은 설정값이 최종적으로 적용됩니다. 만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 !important를 붙이면 됩니다.
애초에 여러곳에 같은 속성을 쓰고 강제로 !important 주는 상황이 이상한 상황이라 이러한 상황을 아예 만들면 안 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Document</title>
<style>
div{
border-color:black;
border-style:solid;
}
</style>
</head>
<body>
<div class ="container" style="border-color: blue;">
<iframe src ="TopBanner.html" height="400px"; width ="500px" scrolling="no" ></iframe>
</div>
</body>
</html>
인라인 스타일은 힘이 강하죠 그래서 blue가 적용되는 것입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Document</title>
<style>
div{
border-color:black !important;
border-style:solid;
}
</style>
</head>
<body>
<div class ="container" style="border-color: blue;">
<iframe src ="TopBanner.html" height="400px"; width ="500px" scrolling="no" ></iframe>
</div>
</body>
</html>
하지만 !important를 적용시켰을 때 이렇게 바뀝니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>오늘 점심은?</h3>
<select>
<option>짜장면</option>
<option>짬뽕</option>
</select>
</body>
</html>
iframe은 모듈화된 페이지를 하나로 뭉치는 것입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Document</title>
<style>
div{
border-color:black;
border-style:solid;
}
</style>
</head>
<body>
<div class ="container">
<iframe src ="TopBanner.html" height="400px"; width ="500px" scrolling="no" ></iframe>
</div>
</body>
</html>
button의 경우 디자인적인 관점에서 input 요소와 달리 매우 자유롭다. 일반적인 요소들을 디자인하는 모든 것들을 적용할 수 있어 배경으로 이미지를 넣을 수도 있다. <button> 과 </button> 사이에 다른 태그들을 삽입할 수도 있다.
최근에는 각종 라이브러리에서 button 요소들에 대한 꾸밈을 적용한 CSS를 배포하기에 간단히 클래스명을 이용해 이를 적용할 수도 있다.
| [HTML] <Meta> 태그 (0) | 2023.12.10 |
|---|---|
| [HTML] 시멘틱태그 (0) | 2021.06.26 |
| [HTML] input태그 (0) | 2021.06.21 |
| [HTML] table(테이블) 태그 (thead, tbody, tfoot, tr, th, td) (0) | 2021.06.21 |
| [HTML] ol 태그, ul 태그, dl 태그, dd 태그, dt 태그 (0) | 2021.06.21 |
input 태그는 진짜 많이 씁니다. 이번엔 한번에 다 제가 아는 거 올려봤습니다. 이번에 기니까 코드까지 같이 올려드립니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HelloWorld!</title>
</head>
<body>
<fieldset>
<legend> 이필드의 제목 </legend>
<foam action = "http://.....">
<pre>
<input type = "text">( 글을 쓸 수 있다. )
<input type = "password"> ( **** 암호화표시 )
<input type = "button" value = "버튼"> (버튼)
<input type = "submit" value = "전송"> （ foam 태그에 연결 시키는 버튼 )
<input type = "reset"> : ( 원래대로 되돌리는 버튼 ）
<input type = "image" src ="벽지.jpg" width ="20px"> ( 이미지 표시 클릭 가능 )
<input type = "checkbox" value ="1"> ( 체크 박스 ) <input type = "checkbox" value="2" checked> ( 체크 박스 2)
<input type = "radio"> 라디오버튼1<input type ="radio"> 라디오버튼2 ( 해제 불가능 동그라미 체크 박스 )
<input type = "month"> ( 년 , 월 )
<input type = "week"> ( 몇 주 , 년 )
<input type = "date"> ( 년 , 월 , 일 )
<input type = "time"> ( 시각 )
<input type = "datetime-local"> ( 연도 , 월일 , 시각 )
<input type = "color"> ( 색깔을 정할 수 있다. )
<input type = "email"> ( email 형식인지 확인해줌 )
<input type = "url"> ( url 형식인지 확인해줌 )
<input type = "tel"> ( 전화번호 형식인지 확인해줌 )
<input type = "serach"> ( 검색 키워드 )
<input type = "file"> ( 파일 업로드 버튼 )
<input type = "number"> (숫자만 입력가능)
<input type = "range" min = "10.0" max = "30.0" list="epype"> 30 df
( 30df 라는게 적혀있고 게이지 바로 10 ~ 30 까지이다 )
<datalist id = "epype"> ( input range 랑 같이 쓰인다 )
<option value ="12" label = "low"> ( 12 일 때 표시선 하나 )
<option value ="20" label = "Medium"> ( 20 일 때 표시선 하나 )
<option value ="28" label = "High"> ( 28 일 때 표시선 하나 )
</datalist>
<input type="text" list="countries">
<datalist id="countries">
<option value="가나">
<option value="스위스">
<option value="브라질">
</datalist> (입력도 가능하고 선택도 가능하다)
</pre>
</foam>
</fieldset>
</body>
</html>
| [HTML] 시멘틱태그 (0) | 2021.06.26 |
|---|---|
| [HTML] select 태그, iframe 태그, button vs input (0) | 2021.06.21 |
| [HTML] table(테이블) 태그 (thead, tbody, tfoot, tr, th, td) (0) | 2021.06.21 |
| [HTML] ol 태그, ul 태그, dl 태그, dd 태그, dt 태그 (0) | 2021.06.21 |
| [HTML] div태그, span태그 (블록태그 , 인라인태그) (0) | 2021.06.21 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border='1'>
<thead>
<tr>
<th>출장비 내역</th>
<th>금액</th>
</tr>
</thead>
<tbody>
<tr>
<td>교통비</td>
<td>45000</td>
</tr>
</tbody>
<tr>
<td>총 합계</td>
<td>103000</td>
</tr>
</tfoot>
</table>
</body>
</html>
table, thead, tfoot
<table>로 시작하고 </table>로 끝납니다
<thead>란 표의 가장 위에를 의미합니다.
<thead>에 포함되는 <tr>이 행이 되고 <th>열이 됩니다.
<tr>이 1개이고 <th>가 2개이니 1행 2열이 되는 것이죠
<tfoot> 가장 마지막 줄을 의미합니다.
<tfoot> 의 경우는 <tr>이 행이 되고 <td>가 열이 됩니다.
<tbody>는 <thead>와 <tfoot>을 제외한 나머지 부분을 의미합니다.
<tbody>의 경우 <tr>이 행이 되고 <td>가 열이 됩니다.
<thead> <tbody> <tfoot>의 경우 안 써도 결과 무방하지만 나중에 부트스트랩이라는 걸 쓰면 구분해서 써야합니다. 그리고 여러 태그중에 어디서 부터 헤드이고 바디이고 푸터인지 알아보기도 쉬워지죠
| [HTML] select 태그, iframe 태그, button vs input (0) | 2021.06.21 |
|---|---|
| [HTML] input태그 (0) | 2021.06.21 |
| [HTML] ol 태그, ul 태그, dl 태그, dd 태그, dt 태그 (0) | 2021.06.21 |
| [HTML] div태그, span태그 (블록태그 , 인라인태그) (0) | 2021.06.21 |
| [HTML] 텍스트 태그 <b>,<strong>,<i>,<del>,<ins>,<mark>,<sup>,<sub>,<small> [진하게, 강조, 이탤릭, 취소선, 밑줄, 하이라이팅, 윗첨자, 아랫첨자] (0) | 2021.06.21 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>라면 끓이는 방법</h3>
<ol type="A">
<li>물을 끓인다</li>
<li>라면과 스프를 넣는다</li>
</ol>
</body>
</html>사진으로 이해하시면 편합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>먹고 싶은 음식</h3>
<ul>
<li>감자탕</li>
<li>피자</li>
</ul>
</body>
</html>ol태그와 다른 점은 마커 타입을 정할 수 없습니다. 하지만li을 쓴다는 공통점이 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>웹 브라우저 종류</h3>
<dl>
<dt>Internet Explorer</dt>
<dd>
마이크로소프트에서 만든 브라우저로
현재 시장에서 가장 많이 사용한다.
</dd>
</dl>
</body>
</html>사진으로 보시는 거와 같이 용어 설명과 같은 구조에서 자주 쓰입니다. <dl> 로 감싸주고, <dt> 는 용어이름, <dd> 세부내용입니다.
| [HTML] input태그 (0) | 2021.06.21 |
|---|---|
| [HTML] table(테이블) 태그 (thead, tbody, tfoot, tr, th, td) (0) | 2021.06.21 |
| [HTML] div태그, span태그 (블록태그 , 인라인태그) (0) | 2021.06.21 |
| [HTML] 텍스트 태그 <b>,<strong>,<i>,<del>,<ins>,<mark>,<sup>,<sub>,<small> [진하게, 강조, 이탤릭, 취소선, 밑줄, 하이라이팅, 윗첨자, 아랫첨자] (0) | 2021.06.21 |
| [HTML] 특수기호 사용법 (0) | 2021.06.21 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div {
background-color: skyblue;
padding: 20px;
}
span {
color:red;
}
</style>
<body>
<div>
우리는 반드시<span>성공</span>한다
</div>
</body>
</html>div의 태그의 경우 진짜 많이 쓰이는 태그입니다. 네모안에 글씨나 이미지를 넣거나 하죠 항상 새 줄에서 시작하여 왼쪽에서 오른쪽으로 페이지의 전체 너비를 차지합니다. 이러한 걸 블록태그라고 합니다.
span 태그의 경우 새줄에서 시작하지 않고 페이지의 전체 너비를 차지하지 않고 필요한 만큼만 너비를 차지합니다 인라인태그라고 합니다. 그냥 사진으로 이해하시는게 더 편하실 겁니다.
| [HTML] table(테이블) 태그 (thead, tbody, tfoot, tr, th, td) (0) | 2021.06.21 |
|---|---|
| [HTML] ol 태그, ul 태그, dl 태그, dd 태그, dt 태그 (0) | 2021.06.21 |
| [HTML] 텍스트 태그 <b>,<strong>,<i>,<del>,<ins>,<mark>,<sup>,<sub>,<small> [진하게, 강조, 이탤릭, 취소선, 밑줄, 하이라이팅, 윗첨자, 아랫첨자] (0) | 2021.06.21 |
| [HTML] 특수기호 사용법 (0) | 2021.06.21 |
| [HTML] h 태그, img 태그, p 태그, hr 태그, br 태그, pre 태그 [제목, 부제목, 이미지, 단락 나누기, 선 그리기, 줄바꿈, 자유로운 텍스트 형식] (0) | 2021.06.21 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<pre>
<b>진하게</b>
<strong>중요한</strong>
<em>강조</em>
<i>이탤릭으로 강조</i>
<b><i>진하게 이탤릭으로 강조</i></b>
보통 문자<small>한 단계 작은 문자</small>
<del>삭제</del>
<ins>추가</ins>
보통문자<sup>윗첨자</sup>
보통문자<sub>아랫첨자</sub>
<mark>하이라이팅</mark>
</pre>
</body>
</html>
| [HTML] table(테이블) 태그 (thead, tbody, tfoot, tr, th, td) (0) | 2021.06.21 |
|---|---|
| [HTML] ol 태그, ul 태그, dl 태그, dd 태그, dt 태그 (0) | 2021.06.21 |
| [HTML] div태그, span태그 (블록태그 , 인라인태그) (0) | 2021.06.21 |
| [HTML] 특수기호 사용법 (0) | 2021.06.21 |
| [HTML] h 태그, img 태그, p 태그, hr 태그, br 태그, pre 태그 [제목, 부제목, 이미지, 단락 나누기, 선 그리기, 줄바꿈, 자유로운 텍스트 형식] (0) | 2021.06.21 |
html의 경우 <, > ," , ' 의 경우 등 기본 태그라든가 문법같은 곳에 쓰이기 때문에 이걸 쓰려면 위와같이 코드표현으로 해야합니다.
