[HTML] display 속성 : inline과 inline-block 그리고 block의 차이점.

개발/HTML 2019. 9. 7. 22:15

일단, 인라인 element과 블록 element가 존재한다.

 

블록 엘리먼트는 컨텐츠의 너비와 무관하게 전체를 차지하기 때문에, 수평으로 다른 엘리먼트를 같이 사용할 수 없다.

  

1. display:block;

위와 같이 div 3개를 만들고, display를 block으로 한다면, width가 150px임에도 불구하고 모두 세로로 정렬된다.

 

블록은 페이지 전체 너비를 혼자 사용한다고 볼 수 있다.

 

 

2. display: inline-block;

이 경우, 블록은 유지되지만, 인라인 형태로 보여지게 된다.

즉, 너비를 해당 엘리먼트의 너비만큼만 사용하고 나머지 공간을 다른 엘리먼트들과 나눠쓰게 된다.

따라서, 다음과 같은 모습이 나온다.

 

3. display: inline;

 

이렇게하면, 블록 속성이 전부 무효화된다. 즉, 내부 요소 텍스트만큼만 차지하게 된다.

블록에서 width와 height를 선언했지만, 이것들은 모두 무시된다.

따라서, 다음과 같은 모습이 나온다.

 그리고, 아래와 같이 divbox 속성에 경고가 표시된다.

내용은 위 설명한 것과 같다.

display를 inline으로 하면서, 블록이 아닌게 되어버렸기 때문이다.

'개발 > HTML' 카테고리의 다른 글

자바스크립트로 HTML 코드 작성하는 방법  (476) 2021.07.21
[HTML] HTML에서 자바스크립트 변수를 사용하는 방법은 무엇인가요?  (0) 2021.07.14
div 태그 빠르게 만드는 방법  (0) 2019.09.07
[HTML] HTML 기본 구조 분석하기  (0) 2019.02.18
[HTML] Visual Studio Code 툴에서 Live Server 설치하기  (1) 2019.02.18
Posted by sungho88
,

CSS 속성) text-rendering란 무엇인가?

개발/HTML 2018. 12. 24. 18:58

그렇게 많이 사용되는 속성은 아닌 듯 하다.


여기


블로그에 가면, 자세하게 설명하고 있다.


솔직히, 읽어도 모르겠다.


뭔말인지..


소개


text-rendering CSS 속성은 렌더링 엔진에 텍스트 렌더링시 최적화 할 정보를 제공합니다.


속성값


auto

브라우저는 텍스트를 그리는 동안 속도, 판독성 및 기하학적 정밀도를 언제 최적화 할 것인지에 대해 숙련 된 추측을합니다. 이 값을 브라우저에서 해석하는 방법의 차이점에 대해서는 호환성 표를 참조하십시오.


optimizeSpeed

브라우저는 텍스트를 그릴 때 가독성 및 기하학적 정밀도보다 렌더링 속도를 강조합니다. 그것은 커닝과 합자를 사용할 수 없습니다.


optimizeLegibility


브라우저는 렌더링 속도와 기하학적 정밀도에 대한 가독성을 강조합니다. 이렇게하면 커닝과 선택적 합자가 가능합니다.


geometricPrecision

브라우저는 렌더링 속도와 가독성보다 기하학적 인 정밀도를 강조합니다. 커닝과 같은 글꼴의 특정 측면은 선형으로 확장되지 않습니다. 따라서이 값을 사용하면 해당 글꼴을 사용하는 텍스트가 잘 보입니다.


텍스트가 렌더링될때 최적화를 통해서 더욱 선명하게 나오게 하기 위해서 사용되는 속성인 것 같다.

아니면 말고..

굳이 사용할 필요... 사용해야 할 경우가 있을까? 

많이 없을 듯 하다..

'개발 > HTML' 카테고리의 다른 글

[HTML] HTML 기본 구조 분석하기  (0) 2019.02.18
[HTML] Visual Studio Code 툴에서 Live Server 설치하기  (1) 2019.02.18
[HTML] HTML에서 div 안에 div를 정중앙으로 옮기는 방법. display 속성.  (0) 2018.12.04
WEBn : 웹 어플리케이션 서비스 만들기가 개편되었네요  (0) 2018.11.17
페이지 가운데 정렬하기 : maring: 0 auto  (0) 2018.11.16
Posted by sungho88
,

[React] 리액트(React)에서 SCSS 사용하는 방법 & 설정 방법

개발/React 2018. 10. 18. 17:31

드디어 리액트에서 scss를 사용하기 편리해졌다.


v2가 릴리즈되면서 매우 편해졌다.


지난번까지는 


yarn eject를 해서, css 부분을 복사해 하단에 붙여넣고 sass-loader를 추가하고 


나름 복잡한 작업을 해줘야 SCSS를 인식했다.


하지만, 업데이트되면서,


node-sass만 설치해준뒤,


CSS파일을 불러오듯이,  --> import './App.css';


SCSS파일을 불러와서 사용하면 된다. --> import './App.scss';


와우!


편해졌다.




만약,  node-sass를 설치하지 않고 scss를 사용하려고 한다면 다음과 같은 에러가 발생한다.



쉽게 해석하면,


sass 파일을 import하기 위해서는 node-sass를 설치하라!


라는 의미이다.


yarn add node-sass


또는


npm install node-sass 를 입력한다.


 


(예제)


TestComponent.js를 하나 만든다. 그리고, scss 파일을 import한다.



import React from 'react';
import './TestComponent.scss';


const TestComponent = () => {
return (
<div className="MyComponent">
<h1 className="header01">Test Component</h1>
</div>
);
};


export default TestComponent;


TestComponent.scss를 만든다.



.MyComponent {
background: yellow;
color: black;
padding: 1rem;
.header01 {
background: white;
color: black;
font-size: 3rem;
text-align: center;
padding: 1rem;
}
}

 

App.js에서 TestComponent.js를 import한 뒤, 삽입한다.



import React, { Component } from 'react';
import './App.css';
import TestComponent from './TestComponent';


class App extends Component {
render() {
return (
<div className="App">
<TestComponent />
</div>
);
}
}


export default App;




이렇게한뒤, 


css를 사용하는 것처럼 적용된다.









'개발 > React' 카테고리의 다른 글

[React] 리액트에서 달력(Calendar) 사용하기  (0) 2018.12.28
React에서 component 안에서 div의 height를 최대(100%)로 지정하는 방법  (1) 2018.12.04
[React] react-router-dom 설치가 안 될때, 전역으로 설치해야합니다.  (0) 2018.10.16
[React] 리액트를 하면서 궁금증 모음  (0) 2018.10.12
[React] React에서 import할때, 중괄호 {} 의 의미는 무엇인가??  (6) 2018.10.12
Posted by sungho88
,

CSS 개념 및 선택자(Selector) 사용하는 방법

개발/HTML 2018. 6. 30. 12:35

CSS 개념 및 적용 방법


= Cascading Stylesheets의 약자.


= CSS를 HTML에서 적용시키는 방법에는 세 가지가 존재한다.


1. HTML 태그 안에 직접적으로 적용하기(인라인 스타일)

2. <style>태그를 이용해서 HTML 파일에 작성 후 적용하기

3. 외부에서 .css 확장자를 갖는 CSS 파일을 생성해서 HTML에서 불러와서 사용하기.


1번은 유지보수나 가독성 측면에서 최대한 사용하지 말아야하며,

2번은 간단한 CSS라면 가능하지만, 이것 역시 HTML파일에  CSS가 포함되어 길어지기 때문에 별로이다.

3번을 추천한다. 이렇게 작성해야 HTML과 CSS가 분리되어 따로따로 관리를 할 수 있고, 재사용이 용이하다.


1번의 경우 태그의 속성으로 style을 선언 후 작성.

이렇게 코딩을 하게 되면 추후 수정이 어렵고, 코드 가독성이 떨어진다!



2번의 경우 <head>태그 안에 <style>을 선언 후 작성



3번의 경우 HTML에는 CSS를 일절 사용하지 않고, 호출만 한다. 그러면 적용된다.

외부에 .css파일을 생성한 뒤, 호출한다. 호출방법은 다음과 같다.


<link rel="stylesheet" href="style.css">


<link>로 연결을 하는데, href 속성을 사용한다.
같은 경로에 있을 경우에는, 그냥 style.css를 사용하고 다른 경로에 있을때는 상대경로를 작성해준다.

이것은 HTML 파일 설정에 해당하므로, <head>태그 안에 넣어야한다.


CSS 선택자(Selectors)


- CSS 적용시 { } 안에 속성:값; 형식으로 넣는다.

선택자에는 여러가지 종류가 있다.


1) 태그를 선택자로 하기

<style>
h1 {
color: blue;
}
</style>


태그를 선택자로 한다면, 모든 태그에 CSS가 적용이 되는 것을 주의해야한다.


2. 특정 태그를 CSS 적용하기.


<style>
#green-heading {
color: green;
}

.primary-para {
color: red;
}
</style>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<div class="box">
<h2 id="green-heading">Welcome</h2>
<p class="primary-para">
Hello My World
</p>
</div>


특정 태그를 선택하여 스타일을 적용하는 방법에는 두 가지가 존재한다.


1) class (클래스) : 태그 속성을 class="box"로 했다면 CSS에서 이 태그를 호출할 때는, 점(.)을 태그앞에 쓴다.  : .box

2) id (아이디) : 태그 속성을 id="box01"로 했다면 CSS에서 이 태그를 호출할 때는, 샵(#)을 태그앞에 쓴다.  : #box01

  

HTML에서 태그의 내부 태그(Nested Selectors)를 찾는 방법은 다음과 같다.


.box h2 {
    color: blue;

}


이 것은 class="box"로 선언된 div태그의 하위인 h2태그에 CSS를 적용하겠다는 의미이다.


주의할 점은, 콤마로 구분을 할 경우 Nested Selectors가 아니라 각각 적용이 되므로


.box와 모든 h2가 css 적용이 되어버리므로 그냥 space 1번으로 작성해야한다.


즉, 여러개를 동시에 적용하려면 콤마(,)를 사용한다.





<ul>
<li><a href="">List01</a></li>
<li><a href="">List02</a></li>
<li><a href="">List03</a></li>
<li><a href="">List04</a></li>
<li><a href="">List05</a></li>
<li><a href="">List06</a></li>
<li><a href="">List07</a></li>
</ul>


이렇게 하면,


이렇게 되는데, a태그를 css에서 원하는대로 바꿀 수 있다.


'개발 > HTML' 카테고리의 다른 글

[HTML] CSS 기초  (0) 2018.10.18
[HTML] 파비콘(Favicon) 만들고 적용하는 방법  (0) 2018.10.02
HTML에서 사용되는 태그 모음 한 방 정리..  (0) 2018.06.28
[HTML] <blockquote> 태그에서 cite 속성은 무엇인가?  (0) 2018.06.28
[HTML] HTML의 특징과 구조 그리고 기본적인 HTML 태그들...  (0) 2018.06.28
Posted by sungho88
,

[HTML] HTML에서 CSS파일 사용시, class와 id 확장 연산자

개발/HTML 2018. 5. 1. 18:15

클래스


- 연산자 .으로 호출

- 중복 허용.


아이디


- #으로 호출

- 중복 불가(유일한 1개 매칭)



'개발 > HTML' 카테고리의 다른 글

[HTML] <blockquote> 태그에서 cite 속성은 무엇인가?  (0) 2018.06.28
[HTML] HTML의 특징과 구조 그리고 기본적인 HTML 태그들...  (0) 2018.06.28
[HTML] HTML로 테이블(Table) 생성하기...  (0) 2018.05.01
[HTML] margin과 padding을 css에서 사용하는 방법은?  (0) 2018.05.01
[HTML] 홈페이지에 다음 지도 API를 사용해서 맵 삽입하는 방법...  (0) 2018.05.01
Posted by sungho88
,

HTML의 기본적인 개념 정리

개발/HTML 2017. 8. 4. 00:38

HTML : HyperText Markup Language 


[웹 서버]

- 웹 브라우저의 요청(Request)을 기다리는 하나의 컴퓨터라고 할 수 있다.

- 웹 서버는 브라우저의 요청에 따라 웹 브라우저에게 응답(Response)을 하는 역할을 한다.

- 24시간 쉬지않고 작동해야만 한다.

- 웹 서버는 HTML 파일이나 각종 리소스들을 저장하고 있다.


[웹 브라우저]

- 브라우저에서 어떤 사이트를 열때는, 웹 서버에 해당 HTML 페이지를 요청해야한다.

- HTML은 브라우저에게 웹 페이지의 구조와 내용에 대해 알려준다.


요즘 에디터들은 자동 완성 기능이 훌륭하다.

아톰(Atom) 같은 경우, 확장자를 .html로 하면 HTML로 인식하여 여러 단축키를 사용할 수 있다.

html파일에 html이라 입력을 하게 되면 


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

  </head>

  <body>


  </body>

</html>

이렇게 자동으로 html 태그 구조가 생성된다.

<> 안에 오는 단어 또는 문자를 태그(Tag)라 부른다.
태그 : 브라우저에게 작성한 텍스트의 구조와 의미에 대해 알려준다.

- HTML 문서에 적힌 탭, 리턴, 개행 등 대부분의 공백을 무시한다.

매칭 태그: 시작태그와 종료태그가 존재하는 태그
Ex)
<html> </html> : 이 파일이 html 파일이라고 명시하는 태그
<head> </head> : 타이틀 등 웹 페이지에 관련된 정보를 포함 
<body> </body> : 웹 페이지의 모든 내용과 구조를 포함. 사용자의 눈에 보이는 웹 페이지의 내용.

<title> 안녕하세요. 반갑습니다. </title>


위 문장 처음부터 끝까지 전체를 엘리먼트(Element)라 부르며, 이 경우 title 엘리먼트로 부름.


<style> 엘리먼트는 HTML 태그 내에 head태그 안에 위치해야 함.

<style type="text/css">

또한 type이라는 속성을 갖음. 이것은 스타일의 종류를 브라우저에게 알리는 역할.

즉, CSS를 사용할 것이므로 위와 같이 작성

속성(Attribute) : 엘리먼트에 대한 추가적인 정보를 제공해주는 것.


CSS란?

HTML이 홈페이지의 구조만을 표현하는데 사용되지만, (홈페이지 구조 설계 = 개발)

CSS는 홈페이지의 스타일을 입히는데 사용됨. (홈페이지 꾸미기 = 디자인에 가까움)


정리


1. HTML과 CSS는 웹 페이지를 만들기 위해 사용하는 언어

2. 웹 서버는 HTML과 CSS로 만들어진 웹 페이지들을 저장하고 서비스를 제공하기 위한 용도.

3. 브라우저는 웹 페이지를 요청하여 HTML과 CSS를 기반으로 콘텐츠를 표현함.

4. HTML은 웹 페이지를 구조화하는데 사용

5. CSS는 Cascading Style Sheet의 약자. HTML의 디자인 스타일을 제어하는데 사용.

6. 엘리먼트는 시작태그, 콘텐츠, 종료태그 세 가지로 구성됨.(예외도 존재 : <img >)


///////////////////////////////////////////////////////////////////////////////////////////////////////////////////


'개발 > HTML' 카테고리의 다른 글

[HTML] q 태그의 사용법과 엘리먼트의 종류  (0) 2017.08.04
[HTML] a 태그 사용법과 href의 상대 경로 지정하기  (0) 2017.08.04
Chorme에서 Textarea 크기 조절 막아버리기~  (0) 2017.03.06
HTML 태그에서 띄어쓰기는 어떻게 할까?  (0) 2017.01.31
HTML 내용물 가운데 정렬하기  (0) 2017.01.23
Posted by sungho88
,

티스토리툴바