공대남의 정보수용소

안녕하세요 공대남입니다. 오늘은 폰트 크기, 스타일 조절 및 적용 하는 방법에 대하여 다루어 보겠습니다.

폰트를 적용하는 방법은 후에 좀 더 자세하게 다루도록 하고 오늘은 이 두가지에 대해 배워볼게요.

먼저, 폰트 크기 조절하는 방법은 여러가지 있습니다. 다음과 같이 크게 3가지 있습니다.

이렇게 크게 3가지로 나눌수 있습니다. 폰트 크기 (사이즈)를 조절하는 태그는 { font-size : 값; } 으로 나타내고,

상황에 맞게 편한 것으로써 값에는 1번,2번,3번의 형태중 하나를 넣어주시면 됩니다.

그럼 하나하나씩 구체적으로 보겠습니다.

1. px 단위로 설정하기

일단 px는 픽셀을 의미합니다. 한마디로 폰트의 사이즈를 픽셀로 정의하는 것이고 값으로 넣은 수치는 폰트의 픽셀 크기가 됩니다.

<p> 태그를 이용해 간단한 예시를 보겠습니다. 하나는 폰트 사이즈를 정의하고 하나는 기본 값으로 출력해보겠습니다.

폰트 사이즈를 적용하고자하는 단락에 id를 부여하여 각각 단락이 사이즈가 다르게 나오도록 코딩했습니다.

그럼 브라우저에는 다음과 같이 출력됩니다.

id가 a인 단락이 12픽셀의 크기로 출력되었습니다.

다음은 %단위로 폰트 크기를 적용하는 방법을 보겠습니다.

2. % 단위로 설정하기

폰트 크기는 퍼센트로도 설정할 수 있습니다. 여기서 퍼센트란 기준 폰트 크기 ( 기본값) 에 비하여 어느정도 인지 나타냅니다.

즉 200%라고 하면 기존폰트에 2배만큼 크게, 50%라고 하면 기존폰트에 2배만큼 작게가 되는겁니다.

앞서본 예시와 같이 코딩해보겠습니다.

위 코딩에서 아이디가 a 인 단락에다가 200% 만큼 적용했습니다. 

즉, 밑의 단락이 기본값이므로 밑의 단락보다 2배 큰 사이즈로 출력되게됩니다. 브라우저에는 다음과 같이 출력됩니다.

이와 같이 %를 활용해서 폰트 사이즈를 조절할 수 있습니다.

3. em 단위로 설정하기

em도 %와 비슷합니다. em 도 배수를 의미하고 1em은 기본값과 같은 크기를 나타냅니다.

즉 2.0em은 200%와 같은 의미를 갖게 됩니다. 앞선 예시들과 같은 예를 보겠습니다.

이번엔 아이디가 a인 단락에 3.0em 즉 기본값보다 3배큰 사이즈를 적용했습니다.

그러면 브라우저에는 다음과 같이 출력됩니다.

다음과 같이 출력됩니다. 폰트 크기 조절은 이까지 배워보겠습니다. 크게 3가지 있는데,

상황에 따라 편한걸 적절하게 사용하시면 됩니다. 폰트 사이즈 조절도 html 문서 작성에 빠질수 없기 때문에

잘 배워놓으시면 아주 유용하시게 사용가능 하실겁니다.

다음으로는 폰트 스타일에 관하여 배워보도록하겠습니다.

4. font-weight 속성

폰트 웨이트는 쉽게말해 폰트를 굵게, 진하게 나타내는겁니다. 강조하는 역할을 합니다. font-weight의 값은

normal, bold로 나타낼 수 있습니다. 즉, { font-weight : normal / bold ; } 이 둘중 하나로 적어주시면 되는겁니다.

normal 은 말그대로 보통이고 bold를 쓸 경우 굵게 출력됩니다. 예시를 보겠습니다.

다음과 같이 아이디를 a,b로 나눠 하나는 노말, 하나는 볼드로 설정했습니다. 그러면 브라우저에는 다음과 같이 출력됩니다.

하나는 보통, 하나는 굵게 출력되는걸 보실 수 있습니다.

다음은 font-style 에 대하여 보겠습니다.

5. font-style 속성

폰트 스타일은 이탤릭 텍스트로 설정한 것인지를 정하는겁니다. 이탤릭 텍스트를 한마디로 기울임을 적용한 텍스트입니다.

폰트 스타일 값에는 normal, italic, oblique 세가지 값이 있는데 oblique는 거의 italic과 같아서 동일하다고 보시면됩니다.

그러면 위 예제와 같이 하나는 노말 하나는 이탤릭으로 설정해보겠습니다.

아이디를 둘로 나눠 같은 태그에 각각 적용시켜보았습니다. 브라우저에는 다음과 같이 출력됩니다.

다음과 같이 텍스트가 기울여진 채로 출력됩니다.

-

이번에 폰트의 크기, 스타일 조절에 대하여 배워봤습니다. 다음번에는 텍스트 스타일에 관련되서 알아보겠습니다.

유용한 정보가 되었는지 모르겠습니다. 다음번에는 더 나은 강좌로 돌아오겠습니다. 감사합니다.

안녕하세요 대남이 입니다. 이번에는 css로 html 색상을 바꿔보는 방법에대해 배워보겠습니다.

일단 처음으로 색상을 변경하는 법에대해 알아 볼텐데요. 색상은 웹페이지의 배경색이나 폰트색 등 여러곳에 적용됩니다.

그렇기 때문에 잘 배워두시면 유용하게 쓰이게 될 겁니다.

색상을 적용하는 방법은 여러가지 있습니다. 표를 통하여 보겠습니다.

다음과 같이 표현하여 색상을 적용할 수 있습니다.

그럼 각각 간단한 예제를 보겠습니다.

1. 이름으로 색상 적용

색상을 이름으로 나타내는 방법이 가장 쉽습니다. 적용 시키자하는 속성에다가 색상 값을 적어주기만 하면 적용됩니다.

h2 태그의 배경 색을 푸른색으로 하는 간단한 예시입니다.

색상을 적용할 때 이름을 적는 방법으로 코딩하였습니다.

이렇게 background-color : blue; 로 값을 이름으로 적어주시면 됩니다.

2. 16진수로 색상을 적용시키는 법

색상은 기본적으로 16진수 코드로 정의됩니다. 그 코드는 빨간색,녹색,청색 값을 각각 2자리의 16진수로 표현한 것 입니다.

각 기본 색상에 대한 가장 낮은 값이 0이고 16진수로는 00 으로 표현합니다. 다음으로 가장 높은 값은 255

16진수로는 FF로 표현합니다. 값을 정하는 하나의 컬러값은 # OOOOOO 이런식으로 결정 됩니다.

간단한 예시 : # ff 00 00 ( 순서 : r (red) , g (green), b (blue) )

16진수코드는 #으로 시작하여야 합니다. 이 값은 빨간색 성분이 ff, 녹색 성분이 00, 청색 성분이 00을 합친 색입니다.

그럼 위에서 보았던 <h2> 태그의 색상을 적용한 것을 16진수로 적용할때를 보겠습니다.

이처럼 #0000ff 로 표현하면 됩니다.

3. rgb 값으로 색상 적용하기

이번에는 rgb 값을 적용하는 방법으로 색상을 적용하는 방법입니다. rgb를 퍼센트로 표현 하는 방법과 0 ~ 255 사이의

정수를 정하는 방법이 있습니다. rgb 퍼센트로 정하는 방법의 표현 방법은 다음과 같습니다.

background-color : rgb(60%, 50%, 20%);

이와 같이 각 함량을 퍼센트로 표현하는것 입니다.

두번째는 0 - 255 의 정수의 값을 정해주는 것 입니다.

background-color : rgb(153, 23, 54);

이렇게 정해주는 방법입니다.

그럼 <h2> 태그예시를 rgb 값을 정하는 방식으로 코딩해보겠습니다.

이 처럼 나타냅니다. 그러면 값으로 지정해보겠습니다.

이렇게 바꿔주면 됩니다. 여러가지 방법으로 <h2> 태그의 배경색을 푸른색으로 나타낼 수 있습니다.

여러가지 방법 중 상황에 맞게 편한 방법으로 적용시키면 됩니다.

-

오늘은 색상 적용에 관한여 알아보았습니다. 정보가 유용하셨는지요.

다음번에는 좀 더 좋은 강좌와 유용한 정보로 찾아뵙겠습니다. 감사합니다 !

안녕하세요 대남이입니다. 오늘은 css 파일은 html 문서에 어떻게 삽입하여 효과가 출력되게 할 지

방법에 대하여 배워 보도록 하겠습니다. 방법은 크게 3가지가 있습니다.

이렇게 세가지가 있습니다. 이름으로 어느정도 감이 오지 않나요?

그럼 하나하나씩 예시와 함께 자세히 살펴보도록 하겠습니다.

1. 외부 스타일 시트

외부 스타일 시트는 말 그대로 스타일 시트, css 파일은 외부에 저장하는 것입니다. 이런한 방법은 외부의 하나 css를

많은 페이지에 동일하게 적용하려고 할 때 유용하게 쓰일수 있는 방법입니다. 외부 스타일 시트를 사용하여

전체 웹 페이지의 스타일을 하나의 스타일 파일로 변경할 수 있습니다.

그럼 html 문서에서 외부 스타일 시트 (css) 파일을 불러오는 태그 예시를 보겠습니다.

이와 같이 나타냅니다.  <link> 태그를 이용하여 외부 파일과 연결할 수 있는데, 여기서 외부파일은 css 파일이 됩니다. 

위에서 볼 수 있듯이 type 에는 외부 파일의 종류를 적습니다. 이때, css 를 적어줍니다. 

그다음 rel이라는 속성 html과 외부파일의 관계를 나타 냅니다. 앞서 html강좌에서 href는 링크 태그를 배울 때 보았습니다.

목적지(파일 이름)을 나타냅니다. 이런 구조를 잘 이해하고 계시면, 코딩할 때 유용합니다.

그럼 간단한 예시를 보겠습니다.

이와 같이 웹 브라우저에 출력하려고 합니다. 그러면 일단 html에는 어떤 요소가, css로 어떤 스타일이 적용되었는지 생각합니다.

일단 텍스트를 보면 h1 태그, p 태그가 쓰였고 스타일에서는 색상이 변경되 있습니다.

그럼 처음으로는 html을 통해 h1,p 태그를 써서 텍스트를 작성합니다.

html은 이와같이 나타냅니다.( link 태그는 head에 넣어주시면 됩니다. )

그리고 스타일을 적용시키기위해 외부 파일을 위와 같이 연결시켜줍니다.

그러면 외부 파일 즉 css 에는 h1 태그를 빨간색으로 변경시켜주고, p 태그를 푸른색으로 변경시켜줘야 합니다.

즉 이와같이 나타내면 됩니다. 이때 파일이름을 style1로 저장했다면, html에서 link태그를 사용할 때 href 속성에

반드시 파일이름과 일치시켜야합니다. 이렇게 외부 스타일 시트는 파일을 한번 만들어보면 불러주기만 하면 되기때문에

여러페이지에 같은걸 편하게 적용시킬 수 있습니다.

2. 내부 스타일 시트

내부 스타일 시트는 말 그대로 내부에 스타일을 정의하는 겁니다. 즉, html 문서안에 css를 정의 합니다.

이때 내부 <head> 속 <style> 태그 안에다가 css 태그를 작성하시면 됩니다.

그러면 위와같은 똑같은 예제를 보시겠습니다. 

html 텍스트는 똑같이 작성하면 되고 css 태그도 빨간 파랑 으로 하지만 css 태그를 <style> 태그안에다가 작성합니다.

이와 같이 작성하면 됩니다. 어느 특정페이지에만 필요할 때 이렇게 내부 스타일 시트를 이용하면 좋습니다.

하지만 동일하게 적용해야된다면 외부 스타일 시트로 파일을 하나 만들어 불러오는게 유용합니다.

3. 인라인 스타일 시트

인라인 스타일 시트 또한 말 그대로 해석 한다면 각각의 요소마다 스타일 지정하는 것입니다. 

인라인 스타일 시트는 하나를 특정하게 간편하게 지정할 수 있습니다. 하지만 방대한 양의 html 구성을 다룰 때는

크게 많이 사용 되지는 않습니다. 이때 설정 방법은 각 요소 뒤에다가 <태그 style="tag : 값"> 이와 같이 나타냅니다.

위와 같은 예시의 코드값을 보시겠습니다.

이렇게 <body> 태그안에서 각 요소의 태그안에다가 정의합니다.

즉 말 그대로 인라인 스타일 시트 입니다.

* 우선 순위 ?

만약 html,css문서를 작성해보신다면 css를 삽입하는데 한가지 방법만 사용하는게 아니라

여러가지를 복합적으로 사용합니다. 이럴 때 뭐가 우선적으로 설정되는지 알아보겠습니다.

이와 같이 같이 설정됩니다.

-

오늘은 css를 삽입하는 방법 3가지를 배워봤습니다.

이번 강좌가 유용한 정보가 되었는지 모르겠습니다.

다음번에는 좀 더 유용한 정보와 좋은 강좌로 돌아오겠습니다.

안녕하세요! 공대남입니다. CSS글을 보신다는 것은 HTML에 대해 어느정도 이해도가 있으시다고 생각이되네요.

일단 선택자가 무엇이냐면, 용어 그대로 HTML 요소를 선택하는 부분입니다. 

선택자가 왜 필요하냐면, 우리가 원하는 요소를 선택해야 하기 때문입니다.

일반적으로 모든 요소에 똑같은 스타일을 적용하지 않습니다. 그렇기에 특정한 요소를 선택한 후에

원하는 스타일을 적용하게 되는데, 그때 요소를 설정하도록 하는게 선택자 입니다.

예를 들어,

선택자를 이용하여 p요소를 선택하고 color 속성을 blue로 변경하는 코드는

p { color : blue; } 부분에서

p는 선택자가 되고 color는 속성, blue는 원하는 값이 됩니다.

css코드는 이런식으로 작성이됩니다.

그러면 선택자의 종류는 크게 다음과 같습니다.

그럼 차근차근 하나 씩 살펴 보도록 하겠습니다.

1. 타입선택자

타입선택자는 가장 기본적인 것으로써 HTML 요소 이름을 사용하는 것입니다.

예를 들어 <h1> 요소를 선택하여 color의 속성을 초록색의 값으로 하게하는 것은 이와 같습니다.

h1 { color : green; } 의 구조로써 아까 위에서 설명한 것이 타입 선택자였습니다.

이렇게 h1이라는 요소를 선택하고 적용하려는 속성을 선택하고 값을 선택하시면

이와 같이 브라우저에 출력됩니다.

<p>요소는 선택되지 않았기 때문에 <h1>요소만 스타일이 적용되어 출력됩니다.

2.전체 선택자

전체 선택자는 *기호로 표시되며 페이지 안 모든 요소를 선택할 때 사용하게 됩니다.

주로 모든 요소를 공통적인 속성으로 지정하려할 때 유용하게 사용하실 수 있습니다.

간단한 코딩을 보시겠습니다.

이와같이 *기호를 사용하여

* { color : blue; } 로 나타내게되면 페이지 내에 있는 모든 속성 즉 h1과 p 요소에 모두 적용됩니다.

그러면 브라우저에 이처럼 출력되게 됩니다.

보통 페이지내 모든 요소에 같은 스타일을 적용하는 경우가 드물기 때문에

잘 사용되지는 않습니다.

3.아이디 선택자

아이디 선택자를 사용하게되면 특정한 요소를 쉽게 선택하여, 어떤 특정요소에만 스타일을 적용할 수 있습니다.

먼저 어떤 HTML요소에 id를 부여하여야 합니다. 예를들어 어떤 단락에 아이디를 부여하면,

<p  id="special"> ~~~~ </p>

이렇게 나타나게 됩니다. 아이디 선택자는 id앞에 #을 붙여서

#special { color : blue; } 이처럼 나타나게 됩니다. 예시를 보시겠습니다.

이렇게 특정 <p>요소에 아이디를 부여하게되고 아이디선택자를 써서 스타일을 적용하면,

모든p요소가 아닌 특정 id가 부여된 요소만 스타일이 적용됩니다.

그 다음 이와같이 브라우저에 출력됩니다.

이렇게 id가 special 이라는 요소만 스타일이 적용되어 출력되게 됩니다.

4.클래스 선택자

클래스 선택자는 .을 이용하여 정의된다. 아이디 선택자와 같이 요소를 정의할 때

클래스 이름을 부여할 수 있습니다.

<p  class="type1"> ~~~~ </p>

이와 같이 나타내게 되며, 클래스 선택자는

.target { color : red ; }

이렇게 쓰는데, 아이디선택자와 같다고 생각될 텐데 두 선택자에는 차이가 있습니다.

클래스 선택자는 몇개의 요소를 하나의 클래스로 묶어서 스타일을 지정하려고 할 때 사용되고

id선택자는 하나의 요소만을 선택할 수 있지만, 클래스 선택자는 여러개의 요소를 한꺼번에 선택 가능 합니다.

예를 들어 이와 같이 코딩해보겠습니다.

<h1> 요소와 <p> 요소 둘 다 type1 이라는 클래스를 설정하였습니다.

그러면 브라우저에는 이처럼 출력됩니다.

참고로 text-align 이란 텍스트 정렬 상태를 표시하는 속성입니다.

이처럼 두 요소다 스타일이 적용됩니다.

그리고 속성.type1 이런 식으로 나타내면, 예를들어 p.type1 이렇게 나타내면

p요소 중 클래스가 type1인 요소에게만 적용됩니다. 예시를 보시겠습니다.

이렇게 코딩을하면 브라우저에는 이렇게 표시됩니다.

이와같이 h1 요소는 적용되지 않고 p요소중 클래스가 type1인 것 만 스타일이 적용되어 출력되었습니다.

오늘 선택자 강의는 여기까지 입니다.

다음번에는

CSS를 삽입하는 방법에 대하여 알아보도록하겠습니다. 감사합니다 !