어제자로 생활코딩 사이트에서 HTML 수업을 마쳤다.
앞으로 CSS, JavaScript, Python 등 배우고 싶은 언어가 아주 많다.
나는 사실 어떤 언어가 어떤 특성과 차별점을 갖고 있는지 아직 잘 모른다.
그렇기에 우선은 코딩을 하면서 얻어지는 그 즐거움 자체를 추구하려고 한다.
따라서, 그냥 생활코딩에 정리되어있는 폴더 순서대로 공부를 진행하려고 한다.
두 번째 언어, CSS부터.
<생활코딩 - WEB - WEB2 - CSS>
1. WEB2 - CSS
1 css는 웹을 아름답게 하기 위한 언어이다.
2 15개의 강의로 이루어졌다고 한다. 어제 15개의 강의를 마친 것처럼,
오늘 하루 만에 15개를 다 경험하고 싶은 마음이다. 2. CSS가 등장하기 전의 상황
1 <font color=“”></font>: 폰트에 색을 입혀준다.
2 html이 정보를 담고 있는 것에 비해, css는 명령을 담고 있지 정보는 담고 있지 않다.
3 웹페이지라는 정보 안에 정보가 아닌 디자인에 대한 코드가 포함되면서,
정보로서의 가치가 현저히 감소한다.
4 예를 들어, 클라이언트가 1억 개 단어의 색상을 매일매일 바꿔달라고 요청한다면
우리는 굉장히 불행할 것이다.
5 이 불행을 아주 좋은 에너지원으로 사용할 수 있다.
이 불행으로 인해 충분히 절망한 후 어떤 기술(css 같은)을 배우면,
우리는 그 기술로 인해(덕분에) 해방된 듯한 느낌을 받을 것이다. 3. CSS의 등장
1 <!— (코드코드) —>: 이전에 작성한 폰트 코드 및 다른 코드를 복사, 붙여 넣기 하고
앞뒤로 <!— —> 라는 코드를 붙여주니, 그 부분은 웹페이지에 구현되지 않았다.
2 <style> a { color:red;} </style>: 헤드 닫힘태그 바로 윗부분에 해당 코드를 쓰니,
태그가 걸린 모든 글씨가 빨간색으로 바뀌었다.
3 이렇게 코드를 작성하면, 정보를 분석하는 html의 입장에서 불필요한 디자인 정보는 무시하여
더 정확하고 신속한 정보를 읽어 들일 수 있다.
4 그리고 수정이 필요할 때 간단하게 작업할 수 있기 때문에, 오류를 범할 가능성도 낮아진다.
5 코드를 ‘잘 쓰기’ 위해서는 중복을 제거해야 한다.
CSS를 사용하면 중복을 제거해 효율적, 효과적, 생산적이고 코드를 작성할 수 있다.
나아가, 코드를 읽는 데 가독성도 높아진다.
6 정보를 담은 HTML, 그 정보를 아름답게 보여주는 CSS.- 여기까지 공부한 후, -
HTML이라는 기본적인 코드를 배우고 나니, 더 많은 것을 알고 싶은 욕심이 생겼다. 또한, 8월 5일 시작하는 위코드 스터디와 9월 14일 시작하는 위코드 정규수업에 많은 것을 안 상태로 참여하고 싶어서 빨리 공부하고 싶은 욕심도 생겼다. 또한, 내 코딩공부 일지를 블로그에 어서 쓰고 싶은 욕심도 있다.
이런 욕심으로 인해 앞으로 얼마간의 시간이 남았고 내가 투자할 수 있는 노력의 양은 어느 정도 되는지를 계속 계산하다 보니, 정작 제일 중요한 동영상 강의에 집중을 덜 하게 된다.
처음 HTML 강의를 들을 때는, 이고잉 강사님의 목소리와 공부에 대한 철학, 코드라는 신기하고 흥미로운 것에 대한 상상이 합쳐져 98% 강의에 집중하며 즐겁게 공부했다.
그런데 욕심이 생기고 다른 것에 대한 생각이 계속 머릿속을 떠돌다 보니, 정작 본질적으로 중요한 동영상 강의에 집중하지 못했다. 주객이 전도된 상황이다.
그래도 이렇게 공부한 것을 별도로 타이핑할 때는 여전히 재미가 있다.
5일 전 처음으로 코딩이라는 것을 배울 때의 그 설레던 감정을 기억하자. 강의 자체에 흥미를 갖고 살아있다는 느낌을 받았던 그 순간이 정말로 내가 인생에서 갖고 싶었던 순간이다.
욕심내지 말고.
4. CSS의 기본 문법
1 복습
1) <style></style>: 이 사이에 css의 언어가 입력된다는 것을 나타낸다.
2) 이것은 ‘태그’를 통해 css를 삽입하는 방식이다.
3) 영향을 끼치는 모든 부분에 해당 명령이 실행된다.
2 특정 단어에만 디자인 요소를 추가하고 싶을 때.
1) ‘속성’을 통해 css를 삽입하는 방식을 쓸 수 있다.
2) 태그 <a ~~> 내에 style=“color:green” 이라고 작성하면, 그 태그가 걸린 단어만 색상이 변한다.
- *style이라는 속성은 ‘웹브라우저에서 이 값은 css문법에 따라 해석되고,
이 속성이 위치한 태그에 적용될 것이다.’라는 약속을 가졌다.
3 즉, html에서 css를 사용하는 방법은 두 가지이다.
1) style 태그
1 a 라는 단어를 통해 효과의 대상을 지정한다.
2 { } (선택자)를 통해 css 명령의 구간을 제한한다.
3 ; 를 통해 각 효과코드를 구분한다.
2) style 속성
1 태그 내에 style=“color:~~”라는 속성을 입력한다.
2 { }, ; 가 필요하지 않다.
4 밑줄
1) 모든 밑줄 없앰: style 태그 안에 text-decoration: none: 입력
2) 특정 단어에 밑줄 표시: style 속성 안에 text-decoration:underline 입력5. 혁명적 변화
1 style 내에 있는 a: 선택자(Selector). “모든 a 태그를 선택한다”는 뜻.
2 color;green; : 선언(Declaration, 효과). “태그들에 어떤 효과를 줄 것이다.”
1) color: 속성(Property)
2) red: 속성의 값(Property Value)
3 이런 의미를 알게 되면서, 우리는 무엇을 모르는지를 아는 상태가 되었다.
따라서, 검색을 통해 질문할 수 있고 더 궁금해할 수 있다. 6. CSS 속성을 스스로 알아내기
1 폰트 크기 조절 > “css font size property”라고 검색했더니, css의 페이지가 나왔다.
2 폰트 정렬 조절 > “css text center property”라고 검색했더니, 역시 정보가 잘 정리된 css의 페이지가 나왔다.
3 style 코드 내에 제목코드(h1)를 입력하고 font-size, text-align을 조절했더니, 제목이었던 WEB의 모습이 변했다.
4 신기한 점은, 강의에서 강사님이 알려준 대로 검색을 해서 내가 먼저 직접 해보았다는 것이다.
5 수많은 코드를 외우고 있을 필요가 없고, 인터넷에 검색을 하면 바로 알 수 있다.
6 검색 능력을 키우는 게 코드를 기억하고 있는 것보다 더 중요하다. 7. CSS 선택자의 기본
1 a: 태그 된 모든 코드에 대한 선택자
2 class=“saw”, .saw: 해당 class 태그에 대한 선택자
3 id=“active”, #active: 해당 id 태그에 대한 선택자. (! 중복사용 불가)
4 위의 세 가지 선택자는 하단으로 올 수록 더 큰 힘(우선순위)을 갖는다.
즉, 점점 더 선택을 세분화해서 디자인을 조정할 수 있다.
5 만약 한 개의 클래스 안에 두 개의 단어가 있을 경우 두 개의 단어는 띄어쓰기로 구분한다.
6 style 태그 내 코딩 순서에서 나중에 입력된 것이 더 큰 힘(우선순위)을 갖는다.
7 “css selector”라고 검색하면, 더 많은 선택자를 볼 수 있다. 8. CSS 박스 모델
1 block level element: 화면 전체를 사용(하는 태그)
2 inline elemetn: 자기 크기만 사용(하는 태그)
3 width:숫자px; height:숫자px; : 박스(컨텐츠)의 크기 지정
4 padding: 숫자px; : 글씨(컨텐츠)와 테두리 사이의 거리
5 margin: 숫자px; : 테두리 사이의 거리
6 이 모든 것은 우클릭-검사 에서 자세하게 볼 수 있다.
(크롬에서 해당 경로를 통해 볼 수 있다. 사파리에서 보는 방법을 모르겠다.)
7 HTML 태그 하나하나를 박스로 취급했기에, 박스 모델이라는 이름을 붙였다고 한다. 9. CSS 박스 모델 써먹기
1 박스 테두리 보이기
1) h1 { font-size:45px; text-align:center; border: solid gray 1px}
2) 아래쪽 선(가로선)만 만들고 싶다면 {border-bottom: ~~~}
2 박스 테두리의 넓이를 보기 좋게 조정하고 싶다면, 우클릭-검사 키를 통해 눈으로 확인하면서 조정하자.
3 세로선 보이기
1) ol { } 사이에 border-right:1px solid gray;라고 작성하면,
(block level element이기 때문에) 맨 오른쪽에 세로선이 생긴다.
2) width:100px;을 지정하면, 세로선이 가운데에 온다.
4 선끼리 맞닿도록 하기
1) ol 태그의 margin 값을 0으로 입력
2) ol 태그의 padding 값을 20으로 입력
3) body 태그의 margin 값을 0으로 입력10. CSS 그리드 소개
1 디자인 실습을 위한 ‘무색무취’의 태그
1) div: division이라는 뜻. block level element.
2) span: inline element.
2 style 태그 내에서 div 태그 입력, border: 5px solid gray; 입력
3 div 두 개의 부모태그인 div 태그 작성. id 부여. style 내에서 그 아이디 값에 핑크 부여.
4 #id값 { } 내에 display:grid;grid-template-columns: 150px 1fr; 입력
1) fr은 화면에 남은 공간 전체를 사용한다는 뜻.
2) 2fr 1fr; 은 3개로 분할된 화면 중, 각 2개와 1개의 화면을 사용한다는 뜻.
5 *참고 - https://caniuse.com/ 컴퓨터 언어 기술이 어떤 브라우저에서 얼마큼 구현될 수 있는지 알려주는 사이트11. 그리드 써먹기
1 내 파일에서 ol 태그와 h2, p 태그를 나란히 놓는 방법.
1) h2, p 태그를 div 부모 태그로 묶어줌
2) ol, div 태그를 또 하나의 div 부모 태그로 묶어줌
3) 가장 포괄적인 div에 id=grid(아무거나)부여
4) style에서 grid 태그에 display:grid; grid-template-columns:150px 1fr; 입력
2 보기 좋게 너비 조정
1) 우클릭-검사에서 margin이나 padding 값 조정하면서 모습 보기
2) ol 태그에 padding-left:33px; 입력
3) h2, p를 묶은 div에 id=article(아무거나)부여
4) article 태그에 padding-left:24px 입력
3 불필요한 부분 정리
1) 목록에 회색, 빨간색 삭제 (style 태그에서 saw 부분, ol에서 saw인 class 부분, id=active 부분)
2) 스타일 태그에서 ol 을 #grid ol 로 변경 (“부모가 grid인 ol”이라고 더 정확하게 지정하는 것)
3) #article 태그를 #grid #article 이라고 수정하면, 보다 정확하게 지정하게 됨. - 여기까지 공부한 후, -
코드 입력하다가, 갑자기 예쁜 색들이 모두 사라지고 회색으로만 나타날 때가 있다. 나는 코드를 하며 그 예쁜 색에서 재미를 얻기 때문에 색이 사라지는 건 큰 일이다.
이렇게 회색으로만 나타날 때는 설상가상 알파벳을 입력할 때 아래 나타나는 예시도 나오지 않는다.
그런데 해결방법을 모르니까 그냥 코드를 계속 입력하다 보면, 다시 예쁜 색들이 나타난다. 흠…
기능을 점점 알아가면서, 머리가 복잡해지기 시작했다.
하나하나 개념을 정확히 이해하도록 정리해놔야지, 그렇지 않으면 이런저런 뜻과 단어 알파벳이 머릿속에서 섞일 것 같다.
내가 직접 프로젝트를 진행해서 실험을 해보는 것이 가장 좋은 공부가 될 것 같다.
내 인생 이력을 간단히 적어놓은 웹페이지를 만들자.
목록을 누르면, 각 페이지로 이동해서 관련 이력을 볼 수 있도록.
