[Pre-course] 2021. 10. 06

22885 단어 TILCSShtmlCSS
  1. CSS display: none;

display: none;: 해당 요소는 화면에서 보이지 않는다

→ interactive한 웹을 구현하기 위해 사용

위와 같은 검색 창도 기존엔 해당 영역이 display: none; 으로 보이지 않다가 사용자가 텍스트를 입력하는 순간 JavaScript가 검색 목록 요소에 다른 클래스(display: block;)로 교체하는 것이다


  1. CSS selector 표기법
  • selector:first-child {}
  • selector:last-child {}
  • selector:nth-child {}

selector는 tag, .class, #id 모두 가능

  1. HTML CSS table

table의 태그: <table>, <thead>, <tbody>, <tr>, <th>, <td> 등

한 행을 시작할 때는 <tr> 로 시작, 각각의 셀은 <tr> 태그 내에 <td> 태그를 사용
(테두리 선은 CSS에서 추가해야 한다, 없는 것이 기본 모양)

<th>를 사용하면 가운데 정렬 / 글씨 두꺼워진다

병합: <td> 나 <th> 태그에 colspan, rowspan 이라는 attribute를 추가해서 구현


  1. HTML CSS input
  • 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는

  1. display: inline-block;
  2. 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;를 애용하고 싶다

이항계수
블로그 카피캣 + DOM 개념

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage