코딩 학원 26일차(CSS)

어제 오늘 html과 css를 배우면서 느끼는건데 어떻게 필기를 하고 어떻게 블로그를 써야할지 모르겠다.

Java 같은 경우는 어떤 문제가 있으면 명확한 답이 있는데 이건 없어서 그런건지 참 난감하다. 내가 오늘 이 글을 적는다고 해서 나중에 봤을 때 큰 도움이 될 것 같지 않다는 생각도 든다.

 

오늘 배운 것의 핵심을 요약하자면

테이블을 원하는 모양으로 분할하는 설계

폰트 적용

CSS 문법(선택자)

이 3가지인 것 같다.

 

HTML(Hyper Text Markup Language)

 

CSS(Cascading Style Sheet)

 

HTML은 DOM객체들로 구성 되어 있고 그런 DOM객체들에게 디자인을 부여하는 HTML을 보조하는 존재.

 

CSS 문법은 
선택자{
속성명 : 값;
속성명 : 값;
...
}

이렇다.

 

css selector

 

css작업에 필요하며 굉장히 잘 만들어져있어서 다양한 분야에서 이것을 쓴단다.

 

만약 우리가 했던 xml과 json 파싱에서 이 xml과 json이 없다면? 안 준다면?
html - web crawling (그냥 html로 파싱하는 것)을 해야 되는데 그때도 이게 쓰인단다.

 

위 문법에서 선택자 자리에는 태그명을 넣는다.

 

h4가 2개 이상 있을 때 이런식으로 하면 모든 h4 객체들이 다 색깔이 변한다.

첫번째 것만 색을 바꾸려면 어떡해야할까?

 

태그에 id속성을 부여해주고 css에서 #아이디로 값을 넣어줄 수 있다.

 

또한 모든 HTML의 DOM 객체들은 class 속성 또한 가질 수 있다.
그리고 이를 선택할 때는 .클래스로 불린다,

 

그리고 id의 경우 같은 이름의 id가 여러번 나와서는 안 되고 딱 한번만 나올 수 있다. 반면에 클래스는 여러번 나와도 괜찮다.

 

위에 나온 내용의 선택자들이 기본형이고 ( id = #, class = . )

조합형도 있는데 이는 기본형, 기본형, ... 이렇게 쓰인다.

 

디자인은 먹이고 싶은데 딱히 써먹을 태그는 없을 때 영역처리를 위해 쓰는 것이 <div> 와 <span> 이다. 차이는 div는 줄이 바뀌고 span은 안 바뀌는 정도라고 하셨다.

 

위 처럼 2개의 태그를 콕 집어서 속성을 부여하는 방법이다.

 

그림자는 얼마나 삐져나오게 할 것인지 값을 주는 것인데 왼쪽에서 부터 순서대로 x, y, blur, color 이다.

 

이렇게 그냥 a 그리고 div 영역속의 a를 만들어보라 하셨다. 그럼 div에만 그림자가 들어간다.

 

div 안의 a를 선택할 때는 이렇게 띄어쓰기로 선택한다. (포함된 거)

 

div에서 설정한 스타일을 없애고 싶다면 이렇게 none 설정을 해준다. 굵기 설정은 font-weight로 한다.

 

h1, h4 둘다 bbb인데 h1의 bbb만 선택할 때는 기본형.class를 통해 선택한다.(h1.bbb) (특정 클래스 선택)

 

border로 테두리 설정이 가능한데 선 종류는 다양하다.
실선 : solid, double
점선 : dotted, dashed
음영 : inset, outset
액자 : ridge, groove 

 

왼쪽에서 부터 색깔, 종류, 사이즈 설정을 한다.

 

그리고 지금 같은 경우 알아서 위, 아래, 좌, 우 효과를 줘놨는데 top, bottom, right, left로 따로 따로 설정 또한 가능하다.

 

그리고 class는 여러개 넣을 수도 있다. 

 

이렇게 여러 class가 들어갔을 때는 

이렇게 선택이 가능하다.

 

그리고 box-shadow는 기본적으로 바깥 쪽으로 쳐주는데 inset 쓰면 안쪽으로도 해준다.

 

상태형도 있다.

기본형 : 상태 - 그 상태일 때만

 

마우스가 올라갔을 때만 폰트를 바탕체로 변경.

 

마우스로 누르고 있을 때만 색깔이 바뀜.

 

인풋에 값을 입력하려고 눌렀을 때 색깔 변경

 

아까처럼 head에 style태그 안 쪽이 아닌 바깥쪽에 css를 작성하게 되면 전체 html에 적용이 된다.

 

그리고 이렇게 하면 이 객체에만 스타일을 적용할 수 있다.(style 인데 오타가 났다.)

 

그리고 모든 html마다 css를 따로 쓴다기 보단 어차피 모든 웹사이트가 비슷한 스타일을 쓸 것이기 때문에 css 파일을 하나 따로 만들어 놓고 모든 html에 공유해서 적용하는 느낌으로 쓴단다.

 

그래서 이렇게 css 파일을 따로 만들어서 작업한다.

 

그리고 불러서 쓸 때는 이렇게 사용한다. (앞은 양식, 뒤는 경로)

 

margin은 웹사이트 외곽으로 부터의 여백이고
padding는 박스 안쪽으로 부터의 여백이다.

 

이제 웹사이트 하나 만들어보자 하셨다.

 

html에 2행 1열로 table을 만들고 id 부여 후 css쪽에서 테이블의 가로길이를 100%로 늘리면 html 기본 여백 때문에 공간이 쪼끔 남는다. 이걸 없애려면 body의 padding을 0으로 설정해준다.

 

그리고 폰트를 이용하는 방법

 

1. 무료 폰트 다운 받아서 설치 하고
2. css에서 쓸 거니까 같은 파일에 넣어준다.
3. 개발자나 서버 pc에는 폰트를 설치해놓으면 되긴 하지만 서비스를 이용하는 사람 pc에는 그 폰트가 없을 것이다. 그런데 css 신버전에서 기능이 추가되었단다.

 

이런식으로 폰트를 등록해놓으면 사용자도 이용을 할 수 있게 된다.
그런데 이 마저도 IE에서는 불가능하다. 그리고 폰트파일은 모든 글자의 디자인을 해야하기 때문에 용량이 클 수 밖에 없고 서버나 네트워크가 구리면 폰트가 잘 안 나온다.
그렇기에 이 font-face 기술을 이용하기 위해서는 눈치를 좀 봐야하는 그런 신기술이라고 하신다. 그래서 폰트를 쓰기 보다는 대부분 이미지를 따서 웹사이트를 만든다.

 

이런식으로 2행 1열 테이블안의 1행 1열 셀에 테이블을 만들고 다시 1행 1열 칸 안 쪽에 제목을 써준다.

 

width 1000px은 1024 모니터를 쓰는 사람을 위한 것이다. 그리고 알아서 꾸며보란다.

밑에 메뉴 쪽 td에도 id 주고 border를 주는데 tr에는 안 되고 td에만 가능하다고 하셨다.

 

메뉴도 제목 처럼 똑같이 테이블을 만들어주고

여러 메뉴 탭을 만들기 위해 td를 늘려서 n빵을 해주던지 아니면 그냥 하나의 td로 띄어쓰기로 조절하던지.

 

이런식으로 나눠서 다른 페이지로 넘어가지게끔 말이다.

상태형 써서 바꾸려면 부모에 준 효과는 적용 안 되고 기본상태 때 준것만 바뀐다.

 

에니메이션

속성이 바뀌는 과정을 천천히 나오게 함.

 

어떤 속성이 바뀌는지, 시간, 효과 조절(ease-in, ease-out)

 

느낌 좀 있는 듯

 

이 메뉴 테이블이 스크롤을 내려도 따라다니게 하고 싶다.

대충 스크롤이 생기게끔 테이블 하나 더 만든 다음 td에 막 써갈긴다.

 

그리고 이렇게 알아보기 편하게 해주고 마진 auto로 가운데 정렬을 해준다.

 

그런데 네이버에서 소스보기 하면 table은 온데간데 없고 전부 div와 span으로 되어있다. 전문가들은 div로 만들어서 하나하나 좌표조절을 한단다.

 

좌표조절 시 left, top과 right, bottom으로 한다.
그리고 좌표 체계는 position으로 absolute 혹은 fixed를 사용한다.
absolute는 html 기준
fixed는 브라우저 기준

 

이제 이걸 가창 처음 테이블에 적용시킨다.

그럼 이렇게 되는데 이 밑에 알맹이 테이블을 밑으로 좀 내려줘야한다.

 

그리고 우측에 스크롤 바를 없애고 싶다면
::scrollbar 에서 없앨 수 있고 스크롤바 색깔도 바꿀 수 있는데 이 기능이 또 신버전에서 추가 됬고 아직 브라우저사들 끼리 싸우고 있어서 webkit 계열에서만 사용 가능하고 webkit을 붙혀줘야 한다.

 

display:none;으로 스크롤을 없앨 수도 있긴하다만 불안전하다.

 

이제 저 글자들은 지우고 필요한 진짜 내용이나 이미지를 넣어준다.

 

이미지는 기본적으로 크기 조절은 안 해야 되지만
(애초에 필요한 크기로 이미지를 만들어오던가)
이미지를 조절해야하는 경우도 있을텐데 크기를 늘리는건 깨지겠지만 줄이는 것은 심각하지는 않다.
그래서 이미지 사이즈가 너무 크면 자동으로 조절이 되게 max-width을 이용한다.
최대 크기를 정해놓으면 작은걸 키우진 않고 큰건 줄여준다.

 

그리고 이 똑같은 html을 이름만 다르게 해서 복사 붙여넣기 한 다음 각각 들어가서 내용을 채워준다.

 

이렇게 메뉴 2에는 메뉴2의 내용을 3에는 3, 4에는 4

 

기본적인 게시판을 하나 만들어보자고 하셨다.

이렇게 대충 만들어 넣고 테이블에 id 부여해준다.

 

그리고 항상 말하지만 지금은 유지보수의 시대이기 때문에 index css는 이제 적당히 쓰고 주제별로 css를 만들자고 하셨다.

 

이렇게 게시판용 css를 따로 만들고 적용할 html에만 따로 적용시킨다.

 

위에 대충 만든 테이블 전체에 속성 부여한 뒤 안 쪽에 행열 만들어둔 곳 tr에 class 부여한 뒤 속성 넣어준다.

 

border을 따로 주지 않았지만 td들 간의 간격이 기본적으로 있어서 그 사이로 table에 설정해줬던 배경색이 비춰보이는 것이다. 만약 이게 마음에 안 든다면 테이블 쪽 속성으로 가서

 

border-spacing를 0으로 해준다.

 

다음은 현대식으로 가보자 하셨다.

 

개별 css파일을 만들었다면 꼭 과하게라도 테스트 해보고 가라고 하셨다. 나중에 다 만들었는데 적용이 안 되는 경우가 많단다.

 

사용자가 사진을 업로드할 때는 진짜로 어쩔 수 없이 사이즈 조절을 해야하는 상황이기에 

 

td와 td의 이미지를 이렇게 조정해준다.

 

text td를 꾸미다가 강사님이 text td에 aaaaaaaaaaaa를 연타 하시더니 table이 터진 것을 보여주셨다.

 

이런 일을 이것을 방지하기 위해 사용하는 것이  word-break 이다.

 

 

메뉴4는 갤러리 형식으로 만들어보자 하셨다.

그냥 위랑 구조는 똑같고 태이블을 2행만 만들고 사진, 텍스트 넣고 폴로라이드 처럼 css 속성을 건들여준게 전부다.

근데 이제 양 옆에 공간을 채우고 싶지만 table을 복사하면 밑으로 주욱 늘어난다.

 

이 float를 넣고 방향 값을 넣어주면 그 방향에서 부터 하나씩 채워주고 다 차면 밑 줄로 내려준다. 그리고 테이블 마다의 margin을 설정해주면

 

이렇게 된다..!

 

강사님이 수업 막간에 아래와 같이 말씀하셨다. Java 배울 때와는 다르게 괴로워하는 우리들을 위해  해주신 말 같기도 하다.

 

M : 개발자
V : 디자이너[HTML/CSS]
C : 상급자

정상적인 상황이라면 우리가 HTML/CSS에 손 댈 일이 없다.
아무튼 우리가 지금 eclipse로 HTML을 써댔는데
웹 디자이너는 나모웹에디터, dreamweaver 같은 것을 쓴단다.
(그냥 표 그리면 알아서 html, css 소스가 만들어진단다.)

내일은 오늘 만든 것을 실제 서버에 올려 보자 하셨다.