웹 문서를 작성하는 프로그램을 '웹 편집기(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 속성들> ;


+ Recent posts