CSSdisplay: none;
display: none;: 해당 요소는 화면에서 보이지 않는다
→ interactive한 웹을 구현하기 위해 사용
위와 같은 검색 창도 기존엔 해당 영역이display: none;으로 보이지 않다가 사용자가 텍스트를 입력하는 순간JavaScript가 검색 목록 요소에 다른 클래스(display: block;)로 교체하는 것이다
CSSselector 표기법
- selector:first-child {}
- selector:last-child {}
- selector:nth-child {}
selector는 tag, .class, #id 모두 가능
HTMLCSStable
table의 태그:<table>,<thead>,<tbody>,<tr>,<th>,<td>등
한 행을 시작할 때는<tr>로 시작, 각각의 셀은<tr>태그 내에<td>태그를 사용
(테두리 선은CSS에서 추가해야 한다, 없는 것이 기본 모양)
<th>를 사용하면 가운데 정렬 / 글씨 두꺼워진다
병합:<td>나<th>태그에colspan,rowspan이라는 attribute를 추가해서 구현
HTMLCSSinput
- type="text": text를 입력
- type="password": 입력 시 까만 원으로 표시
- type="number": 숫자만 입력 가능
- placeholder: 도움말(입력되어 있는 텍스트 X)
- textarea: 긴 텍스트를 입력받고 싶을 때 사용
❓❗ inline, inline-block, block
CSS 레이아웃을 배웁시다 내용 참고
block: 블록 레벨 엘리먼트는 새 줄에서 시작해 좌우로 최대한 늘어난다
div는 표준 블록 레벨 엘리먼트로 그 외엔p와form,header,footer,section등이 있다
inline: 인라인 엘리먼트는 단락 안에서 해당 단락의 흐름을 방해하지 않은 채로 텍스트를 감쌀 수 있다
span은 표준 인라인 엘리먼트로 그 외엔a등이 있다
inline-block:inline엘리먼트와 비슷하지만 너비와 높이를 지정할 수 있다
HTML 작업 시 대부분 inline, block 성질에 의해 태그가 결정된다
하지만 결국은 CSS를 통해 성질을 바꿀 수 있다
block 요소의 성질을 가진 <p> 태그도
css을 사용하여 inline 스타일로 바꾸면 <span> 과 똑같은 디자인이 된다
inline 성질을 갖도록 하는 CSS property는
display: inline-block;float: left or right;
두 가지가 있다
위와 반대로 inline 성질을 가진 태그를 block으로 바꾸는 것은 display: block;이다
❓❗ float
CSS 레이아웃을 배웁시다, TCP SCHOOL, poiemaweb 내용 참고
float: 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 준다
본래 위와 같은 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용된다
* layout: 웹사이트를 구성하는 요소들을 배치할 공간을 분할하고 정렬하는 것
clear:float속성이 적용된 이후 나타나는 요소들의 동작을 조절
컨테이너 요소에float속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기가 어렵다
따라서float속성을 적용하고자 하는 요소가 모두 등장한 이후에는clear속성을 사용하여, 이후에 등장하는 요소들이 더는flaot속성에 영향을 받지 않도록 설정해야 한다
overflow: float 속성이 적용된 HTML 요소가 자신을 감싸고 있는 컨테이너 요소보다 크면, 해당 요소의 일부가 밖으로 흘러넘치게 된다
이때 overflow 속성값을 auto로 설정하면, 컨테이너 요소의 크기가 자동으로 내부의 요소를 감쌀 수 있을 만큼 커지게 된다
clear 사용 예시는 아래에서 확인하자
<style>
p { clear: both; }
</style>
overflow 사용 예시도 아래에서 확인하자
<style>
.box { overflow: auto; }
</style>
❓❗ position - relative, absolute, fixed
CSS 레이아웃을 배웁시다 내용 참고
position: relative;: 자체로는 특별한 의미가 없다
위치를 이동시켜주는top,right,bottom,left프로퍼티가 있어야 원래의 위치에서 이동할 수 있다
position: absolute;: 절대적인 위치에 둘 수 있다
부모 중에position이relative,fixed,absolute하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다
position: fixed;: 눈에 보이는 브라우저 화면 크기만큼, 화면 내에서만 움직인다
absolute는relative를 가진 부모가 필요했는데, fixed는 필요없다
위에서 배운 내용들로 과제를 진행해보자 !
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://kit.fontawesome.com/8647dd210a.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="logo">
<img src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png" alt="">
</div>
<div class="wrapper">
<input type="text">
<i class="fas fa-search"></i>
<i class="fas fa-keyboard"></i>
<i class="fas fa-microphone"></i>
</div>
<div class="box-wrapper">
<div class="box">Weegle 검색</div>
<div class="box">I'm feeling Lucky</div>
</div>
<p>Weegle 제공 서비스 : <a href="">English</a></p>
</body>
</html>* {
box-sizing: border-box;
}
.logo {
text-align: center;
}
.wrapper {
position: relative;
width: 1000px;
margin: 0 auto;
}
input {
width: 100%;
border: 1px solid #ECECEC;
border-radius: 20px;
height: 50px;
}
i {
position: absolute;
margin: 0;
}
.box-wrapper {
display: flex;
justify-content: center;
margin: 10px
}
.box {
line-height: 50px;
vertical-align: middle;
background-color: #F4F4F4;
border-radius: 5px;
padding: 0 10px;
margin: 0 10px;
}
.fas.fa-search {
left: 20px;
top: 15px;
color: #939393;
font-size: 20px;
}
.fas.fa-keyboard {
right: 60px;
top: 15px;
font-size: 20px;
}
.fas.fa-microphone {
right: 20px;
top: 15px;
font-size: 20px;
color: #4f86ec;
}
p {
text-align: center;
margin-top: 20px;
font-weight: bold;
font-size: 0.8em;
}
p a {
text-decoration: none;
font-weight: normal;
}
위 코드에서 나온 결과물은 ~~ !!
검색창에서
input과 icon을.wrapper라는 class로 감싸주었다
.wrapper에는position: relative;를, icon에는position: absolute;를 주어input위에서 이동이 가능하도록 하였다
회색박스들은float가 아닌display: flex;로 해결을 했는데 솔직히flex가 너무 편하다..
물론display: flex;도 이번에 배운거고float는 자기소개 페이지 만들 때 골치를 많이 썩였으니 이제는display: flex;를 애용하고 싶다
