TIL 21 | HTML/CSS +α

meow·2020년 8월 18일

HTML/CSS

목록 보기

10/12

wecode에서 새롭게 알게된 HTML/CSS 내용을 보충하여 작성한다.

1. span의 성질

<span>에는 오른쪽 정렬이 되도록 클래스를 부여해도 오른쪽 정렬이 되지 않는다. 이는 <span>이 inline-element이기 때문에, <span>이 차지하는 영역은 "<span>의 오른쪽 정렬" 만큼의 길이밖에 되지 않기 때문이다.

2. indent를 하는 방법

html 코드내에서 스페이스와 엔터를 아무리 추가하여도, 실제 결과 화면에서는 적용이 되지 않는다. p태그의 문장 앞에 스페이스를 10개 추가하여도 화면에는 적용되지 않는다. 이 문제를 css를 활용하면 들여쓰기가 가능하다.

.js-description {
	text-indent: 50
}

들여쓰기가 필요한 태그에 .js-description을 추가하면 된다.
예) <blockquote class="js-description">

blockquote 이란 태그는 인용구문을 넣을 때 쓰는 태그다.

3. 문장 사이에 스페이스를 추가하기

문장 중간에는 스페이스를 10개를 추가한다 하더라도 스페이스는 하나만이 적용된다. 이럴때는 스페이스를 의미하는 코드를 넣어주어야 한다.  가 스페이스를 의미하는 코드다.
예) <p>스페이스       넣는 예제</p>

4. Border 스타일

border(테두리)의 스타일은 아래와 같이 작성한다. 선 굵기, 선의 종류, 색상 순서대로 입력하면 된다.

span {
	border: 1px dotted #0000ff;
}
p {
	border: 5px solid red;
}

선 스타일의 종류

dotted
dashed
solid
double
groove
ridge
inset
outset

선 또한 윗 선, 오른쪽 선, 아래 선, 왼쪽 선 등 다양하게 스타일을 줄 수 있다.

blockquote {
  border-left: 1px dotted #00ee44;
  border-bottom: 6px dashed darkviolet;
  border-right: 2px solid #666666;
  border-top: 4px double red;
}

border width

underline 대신 border-bottom

p {
	text-decoration: underline;
}

p 태그에 밑줄을 쳐주는 스타일은 위와 같이 작성한다. 하지만 밑줄의 두께나 색깔 등을 커스터마이징하기 어렵다. 이럴 때는 border-bottom으로 내가 원하는 스타일로 밑줄을 설정할 수 있다. 대부분의 개발자는 이 방법을 선호한다.

5. box-sizing: border-box

* {
  box-sizing: border-box;
}

width와 height 프로퍼티는 요소의 너비와 높이를 지정하기 위해 사용된다. 이때 지정되는 요소의 너비와 높이는 콘텐츠 영역을 대상으로 한다. 이는 box-sizing 프로퍼티에 기본값인 content-box가 적용되었기 때문이다. box-sizing 프로퍼티에 border-box를 적용하면 콘텐츠 영역, padding, border가 포함된 영역을 width / height 프로퍼티의 대상으로 지정할 수 있다.

만일 width와 height로 지정한 콘텐츠 영역보다 실제 콘텐츠가 크면 콘텐츠 영역을 넘치게 된다는 것에 유의하여야 한다. (https://poiemaweb.com/css3-box-model)

보이는대로 width 값을 주고, 그 후에 그 안 쪽으로 padding을 주는 것이 생각하기에 쉽다. 따라서 거의 대부분의 웹페이지에는 box-sizing 프로퍼티를 기본적으로 적용한다. 개인 프로젝트나, 실무를 할 때는 꼭 적용해야하는 프로퍼티다.

6. block과 inline

아무리 block 요소의 성질을 가진 <p> 태그도 css을 사용하여 inline 스타일로 바꾸면 <span>과 똑같은 디자인이 된다. inline 성질을 갖도록 하는 CSS property는 display와 float이 있다.

.inline-p {
  display: inline-block;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}

해당 property에 위와 같은 값을 부여하면, 요소 옆에 요소가 위치하는 inline 성질로 변하게 된다. 반대로 원래는 inline 성질을 가진 태그를 block으로 바꾸게 할 수도 있다.

.block-span {
	display: block;
}

위의 CSS로 <span>은 <p> 태그와 똑같은 성질을 갖게 된다.

7. 테이블 병합

<td>나 <th>태그에 colspan, rowspan이라는 attribute를 추가해서 구현할 수 있다. rowspan은 행 병합, colspan은 열을 병합한다.

    <table class="border-table">
      <tr>
        <th></th>
        <th>내용</th>
        <th>장소</th>
      </tr>
      <tr>
        <th>1시</th>
        <td>HTML이란</td>
        <td>101호</td>
      </tr>
       <tr>
        <th>2시</th>
        <td rowspan="2">HTML실습</td>
        <td>102호</td>
      </tr>
       <tr>
        <th>3시</th>
        <td>103호</td>
      </tr>
      <tr>
        <th>4시</th>
        <td>CSS란</td>
        <td>104호</td>
      </tr>
      <tr>
        <th>5시</th>
        <td>CSS실습</td>
        <td>104호</td>
      </tr>
      <tr>
        <th>6시</th>
        <td colspan="2">수업 없습니다.</td>
      </tr>
    </table>

8. input

inline element 디자인 변경

input, textarea, button은 모두 inline element라서 결과물이 한 줄에 이어서 나온다. 실제 사이트를 개발할 때, <input>이나 <textarea>의 부모에 <div>태그로 감싸 영역을 분리하곤 한다.

// 예시
<div class="input-wrap">
	<input type="text">
</div>

textarea resize 기능

textarea 결과화면을 보면 오른쪽 아래 삼각형이 있을 수 있다. 브라우저의 default 기능으로 resize 기능을 원치 않을 경우 없애주면 된다.

textarea {
	resize: none;
}

placeholder, type 스타일

input의 attribute인 placeholder의 색상을 바꾸기 위해서는 어떻게 해야할까? 콜론(:) 두개를 붙여서 CSS selector를 만들 수 있다.

input::placeholder {
	color: #bbb;
}

input 세개 중에서 text 타입인 input만 스타일을 입히고 싶다면, 아래와 같이 표현하면 된다.

input[type="text"] {

}

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

cursor style

버튼에 마우스를 올리면, cursor 모양을 바꾸도록 해보자.

button:hover {
	cursor: pointer;
}

다른 selector 표현 : https://www.w3schools.com/cssref/css_selectors.asp

Try CSS selector : https://www.w3schools.com/cssref/trysel.asp

다른 cursor 종류 : https://www.w3schools.com/cssref/pr_class_cursor.asp
cursor

9. absolute

position: absolute; 는 이름과 같이 절대적인 위치에 둘 수 있다. 특정 부모에 대해 절대적으로 움직이게 됩니다. 부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다. 일반적으로 absolute를 쓸 경우, 절대적으로 움직이고 싶은 부모에게 position: relative; 를 부여하면 된다.

p {
  margin: 0;
  background-color: yellow;
}
.absolute {
  position: absolute;
}
.right-0 {
  right: 0;
  bottom: 0;
}

p태그에 노란색으로 배경을 칠했다. 원래 p태그는 block-element이기 때문에 가로크기가 부모 너비만큼 전부 차지해야 하는데, 마치 inline-element처럼 내용의 크기만큼만 너비가 생긴다. 이렇게 absolute 값을 갖게 되면, 내용의 크기만큼만 가로크기가 됩니다.

right: 0; 의 의미는 오른쪽으로부터 0만큼 떨어졌다는 뜻이라 부모의 우측에 딱 붙어서 나왔다. bottom: 0;도 마찬가지다. .right-0에 left:0;을 추가하면 부모의 왼쪽에서 0 만큼 떨어져있다는 뜻이라서 왼쪽부터 요소가 시작한다. 마치 .right-0에 width: 100%;를 준 것과 같은 결과다.

10. CSS 레이아웃

1) `<div>` 태그에 대해

웹 페이지 레이아웃은 어떤 정보를 페이지의 어떤 영역에 넣느냐에 관한 문제입니다. CSS에서 정보 배치 단위를 정의하기 위해 널리 사용되는 태그가 바로 <div>입니다. 이 태그는 요소를 하나의 논리적인 그룹으로 묶거나, 페이지의 구획을 정의할 목적으로 사용됩니다.
<div> 태그는 만들고 나면 class나 id를 부여하여 각각의 스타일을 적용하게 됩니다. 그러나 id를 적용하면 우선순위가 아주 높다보니 다른 스타일 속성을 쉽게 무력화 시키게 되죠. id를 범용하면 #home #banner #nav a 와 같이 길고 복잡한 selector를 사용해야 하니, id 대신 class를 더 자주 쓰는 것이 좋겠습니다.
물론 한 페이지에 단 하나만 있을법한 논리적인 구분은 id로 하셔도 좋습니다. 예를 들어 전체 페이지를 감싸는 #login-page 환영 팝업인 #welcome-popup 과 같은 정도는 괜찮습니다.

2) 영역 구분 태그

HTML5 버전은 현재 모든 브라우저가 지원하며, 대부분의 개발자가 사용하는 HTML 버전입니다.
HTML5 에서는 div를 대신할 여러 태그가 나왔으니 한번 살펴보시고 의도적으로 사용하려고 노력하면 좋을 것 같습니다.

HTML Semantic Elements ( 필독! )
https://www.w3schools.com/html/html5_semantic_elements.asp

3) 레이아웃 전략

현존하는 CSS 프로퍼티를 통해 정말 창의적인 트릭으로 interactive한 사이트를 만들어내고 있는 좋은 웹사이트들이 많습니다. 다음에 있을 여러 프로젝트를 통해 레이아웃 잡는 법을 익히고, 좋은 사이트에 들어가 개발자도구를 보며 어떻게 레이아웃을 잡았는지 보시면 빠르게 습득할 것입니다.

11. Float

float은 주로 이미지 주변에 텍스트를 감싸기 위해 만들어진 프로퍼티다. 하지만 페이지 전체의 레이아웃을 잡을 때에도 정말 중요한 도구가 된다.

예제1 - float 사용 예제

float 속성에는 left, right, none 가운데 하나를 값으로 줄 수 있다. 그런데 float 속성을 가진 요소는 부모가 높이를 인지할 수 없어서 아래와 같이 부모를 벗어난다.

예제2 - float 문제 해결

float을 해결하려면 clear라는 속성이 필요하다. float 요소 옆에 채워지는 요소들에게 적용하는 프로퍼티이다.

해결방법1.

    <div class="wecode-box">
      <img class="float-left" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/logo/wecode_logo_bk.png">
      <p>아래에 clear요소를 두거나</p>
      <br class="clear">
    </div>

.clear {
  clear: both;
}

바깥 div(.wecode-box) 마지막에 아무태그나 넣고 clear 속성을 적용한다. 이 기법을 사용할 때에는 HTML코드를 더 입력해야 하는 부담이 있다.

해결방법2.

    <div class="wecode-box last-box">
      <img class="float-right" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/logo/wecode_logo_bk.png">
      <p>이게 젤 낫네</p>
    </div>

.last-box {
  overflow: hidden;
}

주로 많이 사용하는 방법인데 바깥 div(.wecode-box)에 overflow: hidden; 을 주는 것이다.

해결방법3.

    <div class="wecode-box float-right">
      <img class="float-right" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/logo/wecode_logo_bk.png">
      <p>.wecode-box도 float이거나</p>

</div>

.float-right {
  float: right;
}

바깥 div(.wecode-box)를 float시킨다. 그러면 자식의 float 높이를 인지하여 그만큼 높이를 차지하게 된다. 하지만 이것도 문제가 있다. float이 되어버려 block 요소의 성질이 없어지게 된다. 아래와 같이 된다.

이러면 width: 100%를 추가하면 된다.

12. Media Query

반응형 웹이란, 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하는 웹 페이지를 의미한다. 오늘날에는 IT 기기의 종류가 더욱 다양해짐에 따라 디스플레이의 크기에 맞게 유동적으로 반응하는 반응형 웹을 구현하는 것이 더욱 중요해졌다.

media query란 Responsive Web 을 구현하는 CSS technique 이다. 특정 조건에서는 어떤 CSS를 적용 하라는 규칙을 줄 수 있다.

CSS에 @media 라는 문법으로 작성하게 됩니다. 아래의 css는 480px보다 작은 화면에서 body 태그 내의 font 크기를 전부 12px로 바꾸는 것이다.

@media only screen and (max-width: 480px) {  
  body {  
    font-size: 12px;  
  } 
}

@media — media 쿼리를 시작하겠다는 의미.
only screen — 어떤 디바이스에서 적용할지 지정. 예를 들면 프린트를 하고싶을 때 적용하려면 only print라고 작성하면 된다. screen이라고 할 경우 어떤 디바이스에 상관없이, 화면에 보이는 스크린이기만 하면 전부 적용된다.
and (max-width : 480px) — media feature라고 불리는 부분. 어느 조건에 아래의 css를 적용할지 작성한다.

@media only screen and (min-width: 320px) and (max-width: 480px) {
	/* ruleset for 320px - 480px */ 
}

SCSS에서 관리 쉽게 하기 (맛보기)

mediaQuery.scss

$phone: "only screen and (max-width: 768px)";
$desktop: "screen and (min-width: 769px)";

box.scss

@media #{$phone} {
  .big-box {
    display: none;
  }
}

@media #{$desktop} {
  .big-box {
    display: block;
  }
}

meow

🌙｀、、｀ヽ｀ヽ｀、、ヽヽ、｀、ヽ｀ヽ｀ヽヽ｀ヽ｀、｀ヽ｀、ヽ｀｀、ヽ｀ヽ｀、ヽヽ｀ヽ、ヽ｀ヽ、ヽヽ｀ヽ｀、｀｀ヽ｀ヽ、ヽ、ヽ｀ヽ｀ヽ、ヽ｀ヽ｀ヽ、ヽ、ヽ｀ヽ｀ヽ、ヽ、ヽ、ヽ｀｀、ヽ｀、ヽヽ 🚶‍♀ ヽ｀｀ヽ｀｀、ヽ｀、

TIL 21 | HTML/CSS +α

HTML/CSS

1. span의 성질

2. indent를 하는 방법

3. 문장 사이에 스페이스를 추가하기

4. Border 스타일

선 스타일의 종류

border width

underline 대신 border-bottom

5. box-sizing: border-box

6. block과 inline

7. 테이블 병합

8. input

inline element 디자인 변경

textarea resize 기능

placeholder, type 스타일

cursor style

9. absolute

10. CSS 레이아웃

1) `<div>` 태그에 대해

2) 영역 구분 태그

3) 레이아웃 전략

11. Float

예제1 - float 사용 예제

예제2 - float 문제 해결

해결방법1.

해결방법2.

해결방법3.

12. Media Query

SCSS에서 관리 쉽게 하기 (맛보기)

mediaQuery.scss

box.scss

TIL 09 | Bootstrap 4! 타이포그래피와 레이아웃

CSS Layout

0개의 댓글

TIL 21 | HTML/CSS +α

HTML/CSS

1. span의 성질

2. indent를 하는 방법

3. 문장 사이에 스페이스를 추가하기

4. Border 스타일

선 스타일의 종류

border width

underline 대신 border-bottom

5. box-sizing: border-box

6. block과 inline

7. 테이블 병합

8. input

inline element 디자인 변경

textarea resize 기능

placeholder, type 스타일

cursor style

9. absolute

10. CSS 레이아웃

1) <div> 태그에 대해

2) 영역 구분 태그

3) 레이아웃 전략

11. Float

예제1 - float 사용 예제

예제2 - float 문제 해결

해결방법1.

해결방법2.

해결방법3.

12. Media Query

SCSS에서 관리 쉽게 하기 (맛보기)

mediaQuery.scss

box.scss

TIL 09 | Bootstrap 4! 타이포그래피와 레이아웃

CSS Layout

0개의 댓글

1) `<div>` 태그에 대해