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

선배님의 권유로 시작한 자바스크립트 공부... 기초 문법까지는 그래도 어려움 없이 쏙쏙 알겠는데..!


뒤로 갈 수록 HTML/CSS과 연관된 내용들이 나오기 시작해서 여기서 자바스크립트는 잠깐 멈춰두고 이 두개를 공부한 후에 자바스크립트를 보는게 맞다 싶어 황급히 배우는 중...


전체 내용을 한번 훑어봤는데 생각보다 어려운  내용이 아닌것 같아 짧은 기간 안에 빠르게 배우는것을 목표로 해보도록 한다.


요즘 게임만 하느라 많이 해이해졌는데... 


하루에 최소 두시간정도는 책상앞에 앉아있자. ^^...

'잡다한 이야기' 카테고리의 다른 글

램 디스크 (RAM disk)  (0) 2020.02.27
블로그 개시!  (0) 2018.12.31

처음 c언어를 배울 때 가장 어려움을 느꼈던 부분이 문자열 부분이었는데, 자바스크립트에서는 상대적으로 문자열을 관리하기 간편하게 되어있다.


1
2
3
4
5
6
7
8
"string" + "test"
"stringtest"
 
"string" + "5"
"string5"
 
"string" + 5
"string5"
cs

기본적으로 자바스크립트에서는 문자열을 합칠 떄 +연산자를 지원한다.

이 때, "string" + 5 와 같이 문자열과 숫자를 +연산할 경우에는 숫자를 문자열로 형변환해 결과가 "string5"가 되는것을 알 수 있다.


1
2
3
4
5
6
7
8
let string = "문자열"
undefined
 
string[2]
"열"
 
string.length
3
cs



다음은 문자열의 특정 문자에 접근하는 방법이다.

특정 문자에 접근하려면 위 코드와 같이 "문자열"[num]형식을 사용하면 된다.

문자열의 길이를 받아오려면 "문자열".length를 사용하면 문자열의 길이를 구할 수 있다.



'웹 > JavaScript' 카테고리의 다른 글

-JavaScript- this  (0) 2019.03.27
-JavaScript- Hoisting이란?  (0) 2019.03.22
-JavaScript- Execution Context와 Execution Stack  (0) 2019.03.20
-JavaScript- 배열(array)  (0) 2019.03.13
-JavaScript- 비교연산자 '=='과 '==='의 차이  (0) 2019.01.04

+ Recent posts

티스토리툴바