웹 문서를 작성하는 프로그램을 '웹 편집기(web editor)'라고 하고 웹 문서를 보는 프로그램을 '웹 브라우저(web browser)'라고 한다.


웹 브라우저 종류 : 크롬, 파이어폭스, 인터넷 익스플로러, 엣지, 사파리, 오페라

크롬 설치하고 기본 웹 브라우저로 정하기

1. www.google.com/chrome에서 크롬 브라우저를 설치



2. 주소 표시줄 오른쪽에 있는 Chrome 맞춤 설정 및 제어 버튼을 클릭한 후 설정을 선택하고 Chrome을 기본 브라우저로 설정


비주얼 스튜디오 코드 설치하고 살펴보기

3. www.visualstudio.com에서 Visual Studio Code 부분에서 Windows용 다운로드를 클릭하면 비주얼 스튜디오 코드에 대한 설명이 있는 페이지로 이동하면서 파일이 다운로드


웹 개발에 있어서 원래라면 가장 처음으로 공부해야하는 건 자바랑 오라클이 아닌 HTML, 그리고 CSS이다. 일단 빠르게 훑어봐야 하는 지금으로썬 두 언어를 같이 공부할 수 있는 책으로 정했다. 만약 부족하다면 각각의 언어마다 한 권씩 더 볼 예정이다. 그리고 바로 프로젝트 해보기! 프로젝트를 해봐야 내가 부족한 게 무엇인지를 알 수 있으니까!


일단 책은 HTML&CSS 처음 공부하기 좋은 책으로 'Do it! HTML5 + CSS3 웹 표준의 정석'을 추천받았다. 원래는 'HTML5 & CSS3 웹 표준 디자인 강좌'를 읽으면서 정리했다가.. 포기;; 전혀 초보가 보기에 적합하지 않는 책 같다. 예전에도 이 책을 공부했던 경험도 있고 그래서 이번에는 꾸준히 할 생각이다.


HTML & CSS 책 목록

Do it! HTML5+CSS3 웹 표준의 정석 (2017) / 고경희 / 이지스퍼블리싱 / 20170103

HTML5 + CSS3 + Javascript 웹 프로그래밍(명품) / 황기태 / 생능출판사 / 20170116

Hello Coding HTML5 + CSS3 / 황재호 / 한빛미디어 / 20180302

최신 표준 HTML + CSS 디자인 (6단계로 마스터하는) / EBISUCOM / 위키북스 / 20170817

모두의 HTML5 & CSS3 / 김인권 / 길벗 / 20180830


이외에 

프로 HTML5 프로그래밍 / 피터 러버스, 브라이언 앨버스, 프랭크 살림 / 위키북스 / 20110719

CSS만 다루는 책 한 권까지 생각


위에 책들은 추천하는 책부터 최신에 나온 책들로 읽을지 안읽을지는 이번 책을 끝내고 생각해볼 예정이다


..


새벽에 했던 공부들을 다 지우고 다시 시작하자니 도저히 기분이 나지 않는다 ㅠㅠ

자꾸 공부하다가 졸고.. 그래서 오늘은 오랜만에 가볍게 읽을 만한 '도둑비서들'이라는 책을 읽으면서 오늘을 마무리한다.



학자금 대출 상환에 의한 횡령에서 시작한 일이 점점 커져버리는 현실에선 일어날 수 없는 이야기. 소설의 결말은 좋게 끝났지만 현실은 그렇게 될 수 없단 걸 알면서도 결국 2시간 조금 걸리는 시간 동안 마지막 페이지까지 다 봤다. 소설 얘기는 여기서 끝! 굳이 소설 줄거리를 얘기하기보다 그냥 흘러가는 대로 요즘 들었던 내 생각을 정리하고 싶어서 글 쓰게 되었으니.


아직 출근 전이라 엄마랑 밥 먹을 때는 티비를 보게 되지만, 요즘 그조차도 안 보게 된다. 티비에 나와서 연예인들이 4차 산업혁명을 준비한답시고 별같지도 않는 짓을 하는 그들의 모습과 이제 막 신입으로 개발자로 뛰어든 주변 사람들의 모습과 너무 대조적이어서 도저히 보고 싶은 생각이 들지 않았다. 


그렇게 준비하고 싶다면 컴퓨터 책 한 권이라도 보고 공부를 해봤는지.. 코드 한 줄이라도 작성해봤는지.. 물어보고 싶을 정도.

그들 중에서도 힘겹게 자기 분야에 올라간 사람들도 있다 생각하면 이런 생각을 하면 안되는건가.. 싶다가도 자꾸만 야속한 마음이 든다.


무튼..

상대적 박탈감이랄까..?


아무리 발버둥 쳐봐도 달라질 수 없는 내 연봉을 누구는 쉽사리 하루 지출 비용일거라 생각되니 허망하다.

이 허망함은 개발자들 사이에서도 급이 있다 생각하니 슬프다.

상위 1% 개발자가 벌어들이는 돈과 누구든 얘기하길 첫 회사를 잘못 가는 바람에 쉽사리 경력이라 말할 수 없어 연봉을 올리지 못한채 살아가는 개발자.

물론 그만큼 노력해서 그 자리에 있는 거겠지만.. 다만, 그 자리까지 올라가는 방법을 누군가 알려줬더라면.. 그런 생각이 들었다.


방법이라도 알려준다면..

이 소설 책에서 행해진 부의 재분배 현상을 실제로 볼 수 있지 않을까?


만약 내가 그 위치에 서게 된다면 어떤 선택을 할까? 그래도 이왕 시작한 거 그 위치까지는 올라가야 할텐데..

무언가 얘기하고 싶은 건 많은 데 머릿속이 정리되지 않아 오늘은 그저 횡설수설하면서 끝내본다.


transform

특정 요소를 바꾸는 속성이다.

transform : 변형 함수 ;


변형 함수



1
2
3
.translate:hover{
                    transform:translateX(300px);
}
cs

translate

x축 방향이나 y축 방향 또는 양쪽 방향으로 이동할 거리를 지정해 해당 요소를 지정한 크기만큼 이동시킨다.

transform : translate(x, y) ;

transform : translateX(x) ;

transform : translateY(y) ;



1
2
3
.scale:hover{
                transform:scale(1.5);
}
cs

scale

지정한 크기만큼 확대 및 축소한다.

transform : scale(x, y) ;

transform : scaleX(x) ;

transform : scaleY(y) ;


1
2
3
4
.rotate:hover{
                transform:rotate(245deg);
                transform-origin:right top;
}
cs

rotate

각도만큼 요소를 시계 방향이나 시계 반대 방향으로 회전시킨다.

transform : rotate(각도) ;

transform : rotateX(각도) ;

transform : rotateY(각도) ;


transform-origin

특정 지점을 변형의 기준으로 설정한다.

transform-origin : left / center / right  top / center / bottom ;



1
2
3
.skew:hover{
                transform:skew(23deg, 17deg);
}
cs

skew

요소를 지정한 각도만큼 비틀어 왜곡한다.

transform : skew(x, y) ;
transform : skewX(x) ;
transform : skewY(y) ;

관련글 : CSS 배경 색과 이미지 background 속성

관련글 : CSS display와 박스모델 width, height, border, padding, margin



1
2
3
.transition{
                transition:all 2s linear;
}
cs

transition-property

트랜지션 대상을 설정한다.

transition-property : all (기본값) / none / 속성 이름 ;


transition-duration

트랜지션 진행 시간을 설정한다.

transition-duration : 시간 ;


transition-timing-function

트랜지션의 시작, 중간, 끝 속도를 설정한다.

transition-timing-function : linear / ease / ease-in / ease-out / ease-in-out ;

  • linear : 시작부터 끝까지 똑같은 속도로 진행한다.

  • ease : 기본값. 처음에는 천천히 시작해서 점점 빨라지다가 천천히 끝낸다. 

  • ease-in : 시작을 느리게 한다.

  • ease-out : 느리게 끝낸다.

  • ease-in-out : 느리게 시작해서 느리게 끝낸다. 


transition-delay

트랜지션 시작 시간을 설정한다.

transition-delay : 시간 ;


transition

transition 속성을 한꺼번에 설정한다.

transition : <transition-property> <transition-duration> <transition-timing-function> <transition-delay> ;


관련글 : HTML 표를 만드는 table 태그들 tr과 td, th

관련글 : CSS display와 박스모델 width, height, border, padding, margin

관련글 : CSS 텍스트 스타일 속성들 font, text, color, line-height



1
2
3
4
5
6
7
table{
        border-collapse:collapse;
        table-layout:fixed;
}
.vertical{
            vertical-align:top;
}
cs


border-collapse

collapse로 지정하면 table의 테두리과 td의 테두리를 하나로 합칠 수 있다.

border-collapse : collapse / separate (기본값) ;


table-layout

기본값인 auto는 내용에 따라 셀의 너비가 달라지는데, fixed로 지정해놓으면 셀 너비가 고정된다.

table-layout : fixed / auto (기본값) ;


vertical-align

셀 안의 내용을 수직 정렬한다.

vertical-align : top / middle / bottom ;


관련글 : HTML 대표적인 텍스트 태그! hn과 p, 그리고 br



1
2
3
4
5
div{
        column-count: 4;
        column-gap: 30px;
        column-rule:3px solid black;
}
cs


column-width / column-count

단의 너비를 고정하거나 단의 개수를 고정한다.

column-width : 크기 ;

column-count : auto ;


column-count : 숫자 ;

column-width : auto ;


column-gap 

단과 단 사이의 여백을 지정한다.

column-gap : 크기


column-rule

구분선의 색상, 스타일, 너비를 지정한다. 관련글 : CSS display와 박스모델 width, height, border, padding, margin

column-rule-color : 색상 ;

column-rule-style : none / dotted / dashed / solid ;

column-rule-width : 크기 ;


column-rule : color style width ;



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
div{
        box-sizing:border-box;
}
.left{
        float:left;
}
.right{
        float:right;
}
br{
    clear:both;
}
.relative{
            position:relative;
            top:20px;
            left:20px;
}
.absolute{
            position:absolute;
            top:236px;
            left:106px;
            z-index:1;
}
.fixed{
        position:fixed;
        top:268px;
        left:189px;
}
cs


box-sizing

border-box로 지정하면 width 값을 테두리를 포함한 값으로 사용할 수 있다.

box-sizing : content-box (기본값) / border-box ;


float

문서 위에 왼쪽이나 오른쪽으로 떠 있는 상태로 배치한다.

float : left / right ;


clear

떠 있는 float 속성을 해제한다.

clear : both ;


position

자유자재로 배치할 수 있다.

position : static (기본값) / relative / absolute / fixed ;

top or bottom : 위치 ;

left or right : 위치 ;

  • relative : 원래 위치에서 상대적인 위치로 배치한다.
  • absolute : 부모 요소의 position : relative ; 기준으로 원하는 곳을 지정해 배치한다.
  • fixed : 원하는 곳에 고정해 배치한다.

z-index

쌓는 순서를 정한다. 값이 작을수록 아래에 쌓이고 클수록 위에 쌓인다.

z-index : 숫자 ;



1
2
3
4
5
6
7
div{
        display:inline-block;
        width:400px;
        border:10px solid orangered;
        margin:50px;
        padding:40px;
}
cs

display

블록 레벨 요소나 인라인 레벨 요소로 바꾸거나 화면에 표시되지 않도록 할 수 있다.

display : block / inline / inline-block / none ;

  • block : 블록 레벨로 지정한다. 기본 너비가 100%로 박스모델을 지정할 수 있다.
  • inline : 인라인 레벨로 지정한다. 콘텐츠만큼만 차지하여 박스모델 지정이 어렵다.
  • inline-block : 배치는 인라인 레벨이지만 속성은 블록 레벨로 박스모델을 지정할 수 있다.
  • none : 화면에 아예 표시되지 않는다.

박스 모델(box model)


width, height

너비는 width, 높이는 height을 사용한다.

width : 크기 ;

height : 크기 ;


border-width

테두리 두께를 지정한다.

border-top-width : 크기 ;

border-right-width : 크기 ;

border-bottom-width : 크기 ;

border-left-width : 크기 ;


border-width : top right bottom left ;


border-style

테두리 스타일을 지정한다.

border-style : none / dashed / dotted / solid ;

  • none : 기본값. 테두리가 표시되지 않는다.
  • dashed : 테두리를 짧은선으로 표시한다.
  • dotted : 테두리를 점선으로 표시한다.
  • solid : 테두리를 실선으로 표시한다.

border-color

테두리 색상을 지정한다.

border-top-color : 색상 ;

border-right-color : 색상 ;

border-bottom-color : 색상 ;

border-left-color : 색상 ;


border-color : top right bottom left ;


border

테두리 두께, 스타일, 색상을 한꺼번에 지정한다.

border : 크기 solid 색상 ;


padding

테두리 안쪽 여백을 설정한다.

padding-top크기 ;

padding-right크기 ;

padding-bottom : 크기 ;

padding-left : 크기 ;


padding : top right bottom left ;


margin

테두리 바깥쪽 여백을 설정한다. margin-left와 right을 같이 auto로 지정하면 중앙에 배치된다.

margin-top : 크기 ;

margin-right : 크기 ;

margin-bottom : 크기 ;

margin-left : 크기 ;


margin : top right bottom left ;



1
2
3
4
body{
        background:peachpuff url("heart.png") repeat-x center fixed;            
        background-size:120px;
}
cs

background-color

배경 색을 지정하는 속성으로 상속되지 않는다. 관련글 : Web Safe Color Name HEX RGB

background-color : 색상 ;


background-image

배경 이미지를 넣는다. 관련글 : HTML 이미지 태그 img  

background-image : url("이미지 경로") ;


background-size

배경 이미지의 크기를 조절한다.

background-size : auto / contain / cover / 크기값 ; 

  • auto : 기본값. 원래 배경 이미지 크기로 표시한다.
  • contain : 배경 이미지가 다 들어오도록 확대하거나 축소한다.
  • cover : 배경 이미지가 전체를 덮도록 확대하거나 축소한다.

background-repeat

배경 이미지를 어떻게 반복할지 안할지를 지정한다.

background-position : repeat / repeat-x / repeat-y / no-repeat ;

  • repeat : 기본값. 배경 이미지를 가로와 세로로 반복한다.
  • repeat-x : 배경 이미지를 가로로 반복한다.
  • repeat-y : 배경 이미지를 세로로 반복한다.
  • no-repeat : 배경 이미지를 한 번만 표시한다.

background-position

배경 이미지의 위치를 조절한다. 위치 값을 직접 지정할 수도 있다.

background-position : left / center / right  top / center / bottom ;


background-attachment

속성값을 fixed로 하면 배경 이미지를 고정시킬 수 있다.

background-attachment : scroll (기본값) / fixed ;


background

배경 관련 속성들을 한꺼번에 표현할 수 있다. 

background : <background 속성들> ;


색상 이름(Color Name)

모든 브라우저에서 표현할 수 있는 색상을 웹 안전 색상(Web Safe Color)라고 한다. 기본 16가지 색상을 포함해 216가지다.


16진수(HEX)

빨간색(Red), 초록색(Green), 파란색(Blue)의 양을 00부터 FF까지 #RRGGBB 형식으로 표시한다.


RGB

빨간색, 초록색, 파란색의 양을 0부터 255로 표시한다. rgba의 경우 마지막 값은 불투명도 값으로 0부터 1까지 사용할 수 있다. 


Pink Colors

Pink

#FFC0CB

rgba(255, 192, 203, 1) 

LightPink

#FFB6C1 

rgba(255, 182, 193, 1) 

HotPink

#FF69B4 

rgba(255, 105, 180, 1) 

DeepPink

#FF1493 

rgba(255, 20, 147, 1) 

PaleVioletRed

#DB7093

rgba(219, 112, 147, 1) 

MediumVioletRed

#C71585 

rgba(199, 21, 133, 1) 


Red Colors

LightSalmon

#FFA07A

rgba(255, 160, 122, 1)

Salmon

#FA8072 

rgba(250, 128, 114, 1) 

DarkSalmon

#E9967A 

rgba(233, 150, 122, 1) 

LightCoral

#F08080 

rgba(240, 128, 128, 1) 

IndianRed

#CD5C5C 

rgba(205, 92, 92, 1) 

Crimson

#DC143C 

rgba(220, 20, 60, 1) 

FireBrick

#B22222 

rgba(178, 34, 34, 1) 

DarkRed

#8B0000 

rgba(139, 0, 0, 1) 


Orange Colors

Red

#FF0000 

rgba(255, 0, 0, 1) 

OrangeRed

#FF4500 

rgba(255, 69, 9, 1) 

Tomato

#FF6347 

rgba(255, 99, 71, 1) 

Coral

#FF7F50 

rgba(255, 127, 80, 1) 

DarkOrange

#FF8C00 

rgba(255, 140, 0, 1) 

Orange

#FFA500 

rgba(255, 165, 0, 1) 

Gold

#FFD700 

rgba(255, 215, 0, 1) 

Yellow

#FFFF00 

rgba(255, 255, 0, 1) 


Yellow Colors

LightYellow

#FFFFE0 

rgba(255, 255, 224, 1) 

LemonChiffon

#FFFACD 

rgba(255, 250, 205, 1) 

LightGoldenrodYellow

#FAFAD2 

rgba(250, 250, 210, 1) 

PapayaWhip

#FFEFD5 

rgba(255, 239, 213, 1) 

Moccasin

#FFE4B5 

rgba(255, 228, 181, 1) 

PeachPuff

#FFDAB9 

rgba(255, 218, 185, 1) 

PaleGoldenrod

#EEE8AA 

rgba(238, 232, 170, 1) 

Khaki

#F0E68C 

rgba(240, 230, 140, 1) 

DarkKhaki

#BDB76B 

rgba(189, 183, 107, 1) 


Brown Colors

Cornsilk

#FFF8DC 

rgba(255, 248, 220, 1) 

BlanchedAlmond

#FFEBCD 

rgba(255, 235, 205, 1)

Bisque

#FFE4C4 

rgba(255, 228, 196, 1) 

NavajoWhite

#FFDEAD 

rgba(255, 222, 173, 1) 

Wheat

#F5DEB3

rgba(245, 222, 179, 1)

BurlyWood

#DEB887 

rgba(222, 184, 135, 1) 

Tan

#D2B48C 

rgba(210, 180, 140, 1) 

RosyBrown

#BC8F8F 

rgba(188, 143, 143, 1) 

SandyBrown

#F4A460 

rgba(244, 164, 96, 1) 

Goldenrod

#DAA520 

rgba(218, 165, 32, 1) 

DarkGoldenrod

#B8860B 

rgba(184, 134, 11, 1) 

Peru

#CD853F 

rgba(205, 133, 63, 1) 

Chocolate

#D2691E 

rgba(210, 105, 30, 1) 

SaddleBrown

#8B4513 

rgba(139, 69, 19, 1) 

Sienna

#A0522D 

rgba(160, 82, 45, 1) 

Brown

#A52A2A 

rgba(165, 42, 42, 1) 

Maroon

#800000 

rgba(128, 0, 0, 1) 


Green Colors

DarkOliveGreen

#556B2F 

rgba(85, 107, 47, 1) 

Olive

#808000 

rgba(128, 128, 0, 1) 

OliveDrab

#6B8E23 

rgba(107, 142, 35, 1) 

YellowGreen

#9ACD32 

rgba(154, 205, 50, 1) 

LimeGreen

#32CD32 

rgba(50, 205, 50, 1) 

Lime

#00FF00 

rgba(0, 255, 0, 1) 

LawnGreen

#7CFC00 

rgba(124, 252, 0, 1) 

Chartreuse

#7FFF00 

rgba(127, 255, 0, 1) 

GreenYellow

#ADFF2F 

rgba(173, 255, 47, 1) 

SpringGreen

#00FF7F 

rgba(0, 255, 127, 1) 

MediumSpringGreen

#00FA9A 

rgba(0, 250, 154, 1) 

LightGreen

#90EE90 

rgba(144, 238, 144, 1) 

PaleGreen

#98FB98 

rgba(152, 251, 152, 1) 

DarkSeaGreen

#8FBC8F 

rgba(143, 188, 143, 1) 

MeduynAquamarine

#66CDAA  

rgba(102, 205, 170, 1)  

MediumSeaGreen

#3CB371 

rgba(60, 179, 113, 1) 

SeaGreen

#2E8B57 

rgba(46, 139, 87, 1) 

ForestGreen

#228B22 

rgba(34, 139, 34, 1) 

Green

#008000 

rgba(0, 128, 0, 1) 

DarkGreen

#006400 

rgba(0, 100, 0, 1) 


Cyan Colors

Aqua

#00FFFF 

rgba(0, 255, 255, 1) 

LightCyan

#E0FFFF 

rgba(224, 255, 255, 1) 

PaleTurquoise

#AFEEEE 

rgba(175, 238, 238, 1) 

Aquamarine

#7FFD4 

rgba(127, 255, 212, 1) 

Turquoise

#40E0D0 

rgba(64, 224, 208, 1) 

MediumTurquoise

#48D1CC 

rgba(72, 209, 204, 1) 

DarkTurquoise

#00CED1 

rgba(0, 206, 209, 1) 

LightSeaGreen

#20B2AA 

rgba(32, 178, 170, 1) 

CadetBlue

#5F9EA0 

rgba(95, 158, 160, 1) 

DarkCyan

#008B8B 

rgba(0, 139, 139, 1) 

Teal

#008080 

rgba(0, 128, 128, 1) 


Blue Colors

LightSteelBlue

#B0C4DE 

rgba(176, 196, 222, 1) 

PowderBlue

#B0E0E6 

rgba(176, 224, 230, 1) 

LightBlue

#ADD8E6 

rgba(173, 216, 230, 1) 

SkyBlue

#87CEEB 

rgba(135, 206, 235, 1) 

LightSkyBlue

#87CEFA 

rgba(135, 206, 250, 1) 

DeepSkyBlue

#00BFFF 

rgba(0, 191, 255, 1) 

DodgerBlue

#1E90FF 

rgba(30, 144, 255, 1) 

CornflowerBlue

#6495ED 

rgba(100, 149, 237, 1) 

SteelBlue

#4682B4 

rgba(70, 130, 180, 1) 

RoyalBlue

#4169E1 

rgba(65, 105, 225, 1) 

Blue

#0000FF 

rgba(0, 0, 255, 1) 

MediumBlue

#0000CD 

rgba(0, 0, 205, 1) 

DarkBlue

#00008B 

rgba(0, 0, 139, 1) 

Navy

#000080 

rgba(0, 0, 128, 1) 

MidnightBlue

#191970 

rgba(25, 25, 112, 1) 


Magenta Colors

Lavender

#E6E6FA 

rgba(230, 230, 250, 1) 

Thistle

#D8BFD8 

rgba(216, 191, 216, 1) 

Plum

#DDA0DD 

rgba(221, 160, 221, 1) 

Violet

#EE82EE 

rgba(238, 130, 238, 1) 

Orchid

#DA70D6 

rgba(218, 112, 214, 1) 

Fuchsia

#FF00FF 

rgba(255, 0, 255, 1) 

MediumOrchid

#BA55D3 

rgba(186, 85, 211, 1) 

MediumPurple

#9370DB 

rgba(147, 112, 219, 1) 

BlueViolet

#8A2BE2 

rgba(138, 43, 226, 1) 

DarkViolet

#9400D3 

rgba(148, 0, 211, 1) 

DarkOrchid

#9932CC 

rgba(153, 50, 204, 1) 

DarkMagenta

#8B008B 

rgba(139, 0, 139, 1) 

Purple

#800080 

rgba(128, 0, 128, 1) 

RebeccaPurple

#663399 

rgba(102, 51, 153, 1) 

Indigo

#4B0082 

rgba(75, 0, 130, 1) 

DarkSlateBlue

#483D8B 

rgba(72, 61, 139, 1) 

SlateBlue

#6A5ACD 

rgba(106, 90, 205, 1) 

MediumSlateBlue

#7B68EE 

rgba(123, 104, 238, 1) 


White Colors

White

#FFFFFF 

rgba(255, 255, 255, 1) 

Snow

#FFFAFA 

rgba(255, 250, 250, 1) 

Honeydew

#F0FFF0 

rgba(240, 255, 240, 1)

MintCream

#F5FFFA 

rgba(245, 255, 250, 1) 

Azure

#F0FFFF 

rgba(240, 255, 255, 1) 

AliceBlue

#F0F8FF 

rgba(240, 248, 255, 1)

GhostWhite

#F8F8FF 

rgba(248, 248, 255, 1) 

WhiteSmoke

#F5F5F5 

rgba(245, 245, 245, 1) 

Seashell

#FFF5EE 

rgba(255, 245, 238, 1) 

Beige

#F5F5DC 

rgba(245, 245, 220, 1) 

OldLace

#FDF5E6 

rgba(253, 245, 230, 1) 

FloralWhite

#FFFAF0 

rgba(255, 250, 240, 1) 

Ivory

#FFFFF0 

rgba(255, 255, 240, 1) 

AntiqueWhite

#FAEBD7 

rgba(250, 235, 215, 1) 

Linen

#FAF0E6 

rgba(250, 240, 230, 1) 

LavenderBlush

#FFF0F5 

rgba(255, 240, 245, 1) 

MistyRose

#FFE4E1 

rgba(255, 228, 225, 1) 


Black Colors

Gainsboro

#DCDCDC 

rgba(220, 220, 220, 1) 

LightGray

#D3D3D3 

rgba(211, 211, 211, 1) 

Silver

#C0C0C0 

rgba(192, 192, 192, 1) 

DarkGray

#A9A9A9 

rgba(169, 169, 169, 1) 

Gray

#808080 

rgba(128, 128, 128, 1) 

DimGray

#696969 

rgba(105, 105, 105, 1) 

LightSlateGray

#778899 

rgba(119, 136, 153, 1) 

SlateGray

#708090 

rgba(112, 128, 144, 1) 

DarkSlateGray

#2F4F4F 

rgba(47, 79, 79, 1) 

Black

#000000 

rgba(0, 0, 0, 1) 



관련글 : HTML 대표적인 텍스트 태그! hn과 p, 그리고 br



텍스트 스타일


1
2
3
4
5
6
7
8
9
10
11
12
13
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<style>
    h1{
        font:3rem 'Pacifico', cursive;
        color:chocolate;
        text-decoration:underline;
        text-align:center;
    }
    p{
        font: 1.2rem/1.5 arial;
        text-align:justify;
    }
</style>
cs

font-style

글자 스타일을 지정한다. 속성값인 italic을 사용하면 이탤릭체로 표시된다.

font-style : italic ;


font-variant

속성값인 small-caps를 사용하면 영어 글꼴을 첫글자를 제외하고 작은 대문자로 표시된다.

font-variant : small-caps ;


font-weight

글자 굵기를 지정한다. 속성값은 두껍게 표시되는 bold를 많이 사용한다.

font-weight : bold ;


font-size

글자 크기를 조절한다. 주로 사용되는 단위로는 px, em, rem이 있다.
상대적 크기를 결정할 수 있는 rem을 사용하는 것이 가장 좋다.

font-size : 2rem ;


line-height

줄 간격을 지정한다. 기본값은 1.2로 폰트 크기의 1.2배만큼 간격을 준다는 의미이다. 보통 1.5~2배 정도가 적당하다.

line-height : 2 ;


font-family

텍스트의 서체를 지정하는 속성으로 상속 된다. 

font-family : arial ;

폰트 랭킹 : http://www.fontreach.com/#top
윈도우 기본 폰트 : https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows
네이버 소프트웨어 - 폰트 : http://software.naver.com/software/fontList.nhn?categoryId=I0000000
구글 웹폰트 : https://fonts.google.com / https://fonts.google.com/earlyaccess


font

font-style, font-variant, font-weight, font-size, line-height, font-family를 한꺼번에 표현할 수 있다.

font : <font-style> <font-variant> <font-weight> <font-size>/<line-height> <font-family> ;


color

속성값으로 색상 이름, hex, rgb를 이용하여 글자색을 지정한다. 

관련글 : Web Safe Color Name HEX RGB 

color : blue ;


text-decoration

텍스트에 밑줄을 없애거나 표시할 수 있다.

text-decoration : none / underline ;


text-align

텍스트를 정렬한다.

text-align : left / right / center / justify ;


+ Recent posts