ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • TIL.40 CSS 알아보기(wecode_2일차)
      TIL 2020. 11. 17. 17:29
      728x90

      CSS layout

      CSS 디스플레이 요소

      1. Inline 요소

      - 크기가 지정되어 있지 안다

      - 인라인 요소의 태그로 감싸져 있는 “그 내용 만큼 만의 크기를(영역을) 갖는다”

      2. block 요소

      - 컨텐츠 내용과 관계 없이 화면 끝까지 크기가 할당되어있다.

      - Block 요소로된 태그들은 강제 줄바꿈이 일어난다.

      - block 요소에서는 width 값을 지정해도 더 이상 늘어나지 않지만,

         margin auto로 설정하면 가운데로 오게 할 수 있다(width 지정해줘야함)

      .center {
  width: 150px;
  margin: 20px auto;
}

      3. lnline_block

      - inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및

         margin과 padding 속성의 상하 간격 지정이 가능해집니다.

      - 대표적인 inline-block 엘리먼트로 <button>이나 <select> 태그 등을 들 수 있습니다.

      div tag vs span tag

      <body> # div tag 와 span tag 차이점

    # div 줄바꿈 적용 및 디스플레이 속성 block
    
    <div style="background-color:red">span1</div>

    <div style="background-color:blue">span2</div>

    <div style="background-color:green">span3</div>

    # span 줄바꿈 미적용 및 디스플레이 속성 inline

    <span style="background-color:red">span1</span>

    <span style="background-color:blue">span2</span>

    <span style="background-color:green">span3</span>

</body>

      4. none

      - 원래 영역을 CSS를 이용해 display: none; 인 상태로 보이지 않는 상태를 유지하다

      텍스트를 입력하는 순간 Javascript가 검색 목록 요소에 다른 클래스로 교체하면서 요소를 보이게/ 안보이게 할 수 있습니다.

      여기서는 hide 클래스의 dispaly : none;  <-> block; 이라는 값으로 교체되면서 텍스트를 입력하는 순간 클래스를 교체하면서 보이게 됩니다.

        <body>
    <div class="hide">나 여기있어!!!!!!!!!!</div>
  </body>

      index.html을 보면 나 여기있어 !!!! HTML은 존재하는데 화면에 보이지 않습니다.

      어차피 안 보일 요소는 왜 작성하는 것일까요?

      목적은 interactive한 웹을 구현하기 위함으로

      정말 많이 쓰이는 기법 중 하나이니 알고 있자

      Table

      table > tr > th, td
      table > caption

      - <caption> : 표의 제목

      - 테이블은 항상 <table> 태그로 감싸져 있다, 보통 table로 직접 구현하지 않고 CSS를 사용한다.

      - <tr> : table row의 줄임말로 한행의 시작을 나타낸다.

      - <td> : table date의 줄임말로 x행x열에 내용을 넣을때 사용하며 td의 갯수가 몇 열인지를 결정하게 된다.

      - <th> : table header의 줄임말로 각 열, 행의 머리를 뜻하며 scope와 함께 사용하여

      조금 더 컴퓨터가 이해하기 쉬운 착한 사이트를 만들 수 있다. // <th> </th>        ->     <th scope='row'></th>

       

      표 합치기

      rowspan : 행을 합치는 것이기 때문에 위아래가 합쳐지고,

       <th rowspan="2">

      colspan : 열을 합치는 것이기 때문에 좌우가 합쳐지게 됩니다.

       <th colspan="2">

      input

      아래 textarea 오른쪽 아래 삼각형이 있는데, 이는 브라우저의 디폴트 스타일이다

       

      이 기능은 resize라고 하며 클릭 후 움직이면서 textarea의 크기를 마음대로 조절할 수 있는 기능이다.

      textarea {
  resize: none;
}

       

      placeholder

      placeholder는 도움말을 넣어주는 부분입니다.

      실제 input에 입력되어있는 텍스트가 아니다. (ID(필수), 비밀번호, 학번)

      placeholder는 회색으로 디폴트가 되어있는데 색을 바꾸려면 CSS에서 어떻게 접근해야할까

      placeholder는 input의 속성으로 아래와 같이 CSS로 표현할 수 있다.

      input::placeholder {
  color: #bbb;
}

      콜론(::) 두개를 붙혀 selector를 만들 수 있지만, 속성을 이같은 방법으로 모두 표현하는것은 아니라고 한다.

       

      input 태그에서 원하는 type만을 선택적으로 스타일을 입히기 위해선 아래와 같이 표현할 수 있다.

      input[type="text"] {
}

       

      위의 type만 선택하는 스타일에서 placeholder만을 강조하고 싶다면 아래와 같이 접근할 수 있다.

      input[type="text"]::placeholder {
  color: red;
}

       

      input 태그에서 value = "값" 을 입력해주면 원하는 input값을 세팅한 상태로 출력할 수 있다.

      <input type="number" value="123456">

      당연히 해당 입력창은 수정이 가능하다.

      Position - absolute

      Postition 에서 사용하는 값은 4개가 있으며, 가장 많이 사용되는 relative 와 absolute에 대해 알아보자.

      • position: static;
      • position: relative;
      • position: absolute;
      • position: fixed;

       

      relative

      position:realtive; 자체로는 특별한 의미가 없다.

      어느 위치로 이동하지는 않지만, 위치를 이동시켜주느 top, right 등의 property가 있어야 원래의 위치로 이동할 수 있다.

      여기서 top, right, bottom, left position 이라는 property가 있을때만 적용되는 프로퍼티이다.

      .relative {
  position: relative;
}
      .relative {
  position: relative;
}
.top-20 {
  top: -20px; # +는 아래로 -는 위로 이동
  left: 30px;
}

       

      absolute

      이름과 같이 절대적인 위치에 둘 수 있다.

      기준 : 만약 부모 중에 포지션이 relative, absolute, fixed 중 하나라도 있으면 그 부모에 대해 절대적으로 움직이며

        해당 태그들이 없다면 가장 위의 태그(body)가 기준이 됩니다.

      일반적으로 absolute를 쓸 경우 절대적으로 움직이고 싶은 부모에게 position:relative;를 부여한다.

      relative와 absolute를 이용한 검색창 만들기

        <body>
    <div>
      <input type="text" placeholder="검색어 입력">
      <img src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/icon/search.png">
    </div>
  </body>
      * {
  box-sizing: border-box;  
}       # 박스 설정시 사방의 padding값도 함께 계산되기 때문에 보이는 대로
        # width 값을 넣어주기 위해 기본적으로 적용해주는것이 좋다.
#앞으로 모든 css 파일에 꼭 넣어야 하는 속성이다

input {
  width: 100%;
  border: 1px solid #bbb;
  border-radius: 8px;
  padding: 10px 12px 10px 12px;
  font-size: 14px
}

div {
  position: relative;
  width: 300px;
}

img {
  position: absolute;
  width: 17px;
  top: 10px;
  right: 12px;
  margin: 0;
}

      Position - fixed

      fixed : 말그대로 고정되어있다는 뜻으로 absolute와 다르게 부모의 position:relative; 가 필요없다.

      fixed는 눈에 보이는 브라우저 화면 크기만큼 화면에서 움직인다.

       

      728x90
      저작자표시 동일조건

      'TIL' 카테고리의 다른 글

      TIL.41 python Repl.it_1(wecode_4일차)  (0) 2020.11.19
      TIL.40 CSS 알아보기_2(wecode_3일차)  (0) 2020.11.18
      TIL.39 HTML.CSS 알아보기(wecode_1일차)  (0) 2020.11.16
      TIL.38 예외 발생시키기 및 만들기  (0) 2020.11.15
      TIL.37 예외처리하기(try, except)  (0) 2020.11.14

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바