미디어 쿼리 (반응형 디자인-Responsive Web)은 브라우저 창의 크기/ 디스플레이 환경에 반응해 웹페이지의 출력을 다르게 할 수 있는 기능이다.

<style>

...

@media(min-width:800px){

div{display:none;

}

}

</style>


@media(조건){실행}으로 생각하면 된다.

소괄호의 조건에 맞는 경우(width가 800px보다 클경우) 참을 반환하고 중괄호 안의 내용을 실행한다.


not, and, only 같은 논리연산자도 사용 가능하다.

 

ex)

@media(조건1)and(조건2)


not의 경우에는 해당 미디어쿼리 전체에 대한 반대를 반환하므로


@media not (조건1)and(조건2)일 경우 우선순위는

@media not((조건1)and(조건2)) 이다.

'HTML&CSS' 카테고리의 다른 글

<div>와 <span>태그  (0) 2019.03.06
-CSS-<style>태그  (0) 2019.03.03
-HTML- 링크  (0) 2019.02.27
-HTML- 태그 <br> vs <p>  (0) 2019.02.21
HTML 기본 구성  (0) 2019.02.20

Div 태그와 span 태그의 차이점에 대해 알아볼것이다.
<div>와 <span> 태그는 사용자가 원하는 요소를 태그로 묶어 관리하기 용이하도록 한다.
그렇다면 <div>와 <span>태그는 어떤 차이점이 있는것일까?

<div>태그는 기본적으로 블록레벨 엘리먼트고, <span>태그는 인라인 엘리먼트이다.

다음 그림을 보자.

​



그림과 같이 블록 레벨 엘리먼트는 간단히 말해서 해당 요소가 페이지의 왼쪽에서 오른쪽 끝까지 차지하는것이다.
워드를 작성할 때 이미지를 첨부하면 해당 위치에 있던 문자들이 이미지 밑으로 밀려나는것을 생각하면 이해하기 쉽다.

인라인 엘리먼트는 해당 요소가 있는 부분의 공간만 사용을 하는것이다.
마찬가지로 워드에서 이미지 첨부 후 편집을 통해 이미지 옆에 문자들이 작성될 수 있도록 설정하는것을 생각하면 이해하기 쉽다.

<div>태그는 width와 height 속성 값에 영향을 받는다. 하지만 <span>태그는 요쇼가 차지하는 공간만을 사용하기 때문에 width와 height값에 영향을 받지 않는다.

'HTML&CSS' 카테고리의 다른 글

-CSS- 미디어 쿼리  (0) 2019.03.10
-CSS-<style>태그  (0) 2019.03.03
-HTML- 링크  (0) 2019.02.27
-HTML- 태그 <br> vs <p>  (0) 2019.02.21
HTML 기본 구성  (0) 2019.02.20

CSS는 HTML과는 다르게 웹페이지의 디자인을 담당하는 언어이다.


다음은 style 태그의 사용 예이다.



<style>

a{

color:red;

}

</style>




여기서 a를 선택자, color를 속성, red를 값이라 칭한다.


또한 color:red를 선언이라 한다.


위 문장은 모든 <a>태그에 대해 {}안의 동작을(글씨의 색을 red로) 수행할것 이라는 명령을 내리는 문장이다.




style은 다른 방법으로도 사용 가능하다.


태그 안의 속성으로 추가하는 방법인데, 사용법은 다음과 같다.


<a href="http://blackjellybear.tistory.com" style="color:red"검은젤리곰의 블로그</a>


이처럼 html의 태그 안에 속성으로 추가가 가능하다.


그리고 이 방법은 처음의 방법과는 달리 속성이 쓰인 태그에 대해서만 적용된다.


'HTML&CSS' 카테고리의 다른 글

-CSS- 미디어 쿼리  (0) 2019.03.10
<div>와 <span>태그  (0) 2019.03.06
-HTML- 링크  (0) 2019.02.27
-HTML- 태그 <br> vs <p>  (0) 2019.02.21
HTML 기본 구성  (0) 2019.02.20

오늘은 HTML의 링크에 대해 알아보자.

기본적인 사용법은 다음과 같다.

<a> 여기를 클릭하세요. </a>

이처럼 <a> 태그로 링크를 걸고싶은 단어나 문장을 감싸면 된다. 간단하다.


하지만 한가지 중요한 정보가 빠져있다.

링크를 클릭했을 떄 어느곳으로 링크되는지 정보가 없으면 태그가 제대로 작동하지 않는다.

따라서 링크될 페이지의 주소가 필요하다.

<a href="https://blackjellybear.tistory.com/"> 여기를 클릭하세요.</a>

href 속성으로 어디로 이 링크가 연결될지 정보를 추가했다.

이 링크를 클릭하면 해당 주소로 링크될것이다.


a태그에 속성도 추가할 수 있다.

링크를 클릭했을때 새로운 탭에서 열리게 하거나 링크에 마우스를 올리면 해당 링크에 대한 설명을 출력하게 해보자.

<a href="https://blackjellybear.tistory.com/" target="_blank" title="검은젤리곰의 블로그로 연결됩니다."> 여기를 클릭하세요.</a>


이처럼 간단하게 링크를 생성하는 방법에 대해 알아보았다.




'HTML&CSS' 카테고리의 다른 글

-CSS- 미디어 쿼리  (0) 2019.03.10
<div>와 <span>태그  (0) 2019.03.06
-CSS-<style>태그  (0) 2019.03.03
-HTML- 태그 <br> vs <p>  (0) 2019.02.21
HTML 기본 구성  (0) 2019.02.20

오늘은 html의 태그들 중 경쟁구도에 있는 br과 p태그에 대해 알아보았다.



br은 줄바꿈을 하는 태그이다.

<br><br>과 같이 연속으로 사용함으로 문단을 나눌 수 있게 된다.



<p></p>는 문단을 만드는 태그이다.
<p>로 문단을 나누었을 경우, 문단과 문단 사이의 거리가 일정하게 고정되므로 비교적 자유도가 떨어져보일 수 있다.


하지만 CSS와 함께 사용했을 경우 차이점이 발생한다.
<p>의 문단 간격은 CSS로 조절 가능하다.
Ex) <p style: margin-top="24px;">

더불어 HTML 코드를 볼 때, <p>태그를 사용하는것이 가독성에 있어서 우수하기 때문에
문단을 나누는 용도로는 <br>태그보다 <p>태그는 사용하는것을 권장한다.

'HTML&CSS' 카테고리의 다른 글

-CSS- 미디어 쿼리  (0) 2019.03.10
<div>와 <span>태그  (0) 2019.03.06
-CSS-<style>태그  (0) 2019.03.03
-HTML- 링크  (0) 2019.02.27
HTML 기본 구성  (0) 2019.02.20

HTML로 웹페이지를 작성할 때, 기본적인 구성에 대해 알아보려 한다.

HTML 문서는 크게 doctype, head, html, body 태그로 이루어진다.

Doctype는 현재 사용하는 html의 버전을 웹 브라우저에게 알린다,

Html은 문서의 처음과 끝을 표시한다.

Head에는 메타 데이터, 문서 타이틀, 외부 파일 링크가 포함된다.

Html문서 작성 예시는 다음과 같다.

<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a website.</p>
</body>
</html>

'HTML&CSS' 카테고리의 다른 글

-CSS- 미디어 쿼리  (0) 2019.03.10
<div>와 <span>태그  (0) 2019.03.06
-CSS-<style>태그  (0) 2019.03.03
-HTML- 링크  (0) 2019.02.27
-HTML- 태그 <br> vs <p>  (0) 2019.02.21

+ Recent posts

티스토리툴바