개발자들도 간단한 css는 알아야 한다고 생각합니다
왜냐하면 디자이너가 디자인 해서 퍼블리셔가 퍼블리싱 후 개발자에게 온 페이지를
데이터가 넘나들수 있도록 만드는 작업을 개발자들이 대부분 하는걸로 알고있습니다
그런데 대부분 제가 경험한 바로는 (이직 7번) 여러 회사들을 본 바 퍼블리셔가 있는 회사는
딱 1곳 ㅎㅎ 그것도 그리 크지 않은 회사였고 구조는 디자이너 1명 퍼블리셔 1명 개발자1명
이런 환경에 처해있다 보니 자연스레 css를 검색하고 알아보고 공부하게 되었습니다
맨땅에 해딩으로 배웠다고 할 수 있겟네요
css는 html로 구성된 마크업 구조에 디자인 요소를 입힐수 있는 수단입니다
그래서 html을 모르고는 css를 안다라고 할 수 없겠죠?
html 태그에 css를 적용시키는 방법은 두가지? (js를 사용하면 더 많습니다)
소스로 확인해봅시다
<div style="width:100px; height:300px; border:#fff solid 1px;"></div>style=" 이 사이에 코드들이 들어가요 "
저 스타일 요소의 속성들이 다 CSS입니다
저런 식으로 마크업에 직접 삽입하는 방법이 인라인 방법입니다
그런데 절대 선호하는 방법은 아닙니다 그 이유는 css파일을 참조하면 해당 태그에 적용되는데
인라인 방법은 우선순위가 가장 높기때문에 아무리 참조된 css파일을 변경해봤자
아무 의미가 없어집니다
그래서 인라인 방식은 피합시다 !
자 그럼 어떻게 저 태그에 적용시키냐 라고 하신다면 class 를 이용하는 겁니다 ㅎㅎ
다음 마크업을 확인해봅시다
<div class="box"></div>자 style를 입력 한것처럼 이번엔 class 를 입력하고 속성을 적어줍니다 바로
box 죠 이 네이밍은 본인의 자유입니다
하지만 이런식으로 적어준다면 좀 더 좋을것입니다
<div class="btn_box_mid"></div>보시기에 대충 유추가 가능하죠 ?
버튼 박스 중간
이런식으로 버튼이 있는 중간박스 인가보다 ~ 이정도로만 알 수 있도록 해도 개발자들이
좋아하지 않을까 싶습니다 ㅎㅎ
자 그럼 이 class 의 내용은 어떻게 작성하느냐
바로 이렇습니다
<head>
<title>devJ<title>
<style>
.box {
width: 80%;
background: red;
color: yellow;
}
</style>
</head>
<body>
<div class="box"></div>
</body>느낌이 오십니까
css는 style 태그를 head안에 넣어주고 적용을 시킵니다 ㅎㅎ 이 방식도 그리 추천하는 방법은
아니지만 어쩔수없는 경우에는 이렇게도 사용하곤 합니다
그럼 어떤 방법이 가장 좋느냐 .css 파일을 생성해서 태그 구조대로 디자인을 맞춰가는것입니다
실무에서 보이는 css 구조는 어떠냐하면
sample.css 파일
div {
width: 80%;
background: red;
color: white;
}
div span {
width:10%;
height:auto;
background-color:#e2e2e2;
}이 파일을 html에 적용시키는 방법은 링크를 걸어주는겁니다
<head>
<link rel="stylesheet" href="sample.css" />
</head>
마찬가지로 해드 사이에 링크 태그로 연결 해줍니다
그리고 의문점이 드셨을건데 div span 이건 뭐냐 싶으실겁니다 저렇게 작성한다라는건
div 태그 안에 있는 span 태그에 대한 속성입니다 구조는 아시리라 믿습니다 ㅎㅎ
그리고 가장 중요한것입니다
<div class="sample1"><div/>
<div id="sample2"></div>
갑자기 id가 나왔습니다 ? 이 id값으로 디자인 요소를 적용하려면
.sample1 {
//디자인 속성 작성
}
#sample2 {
//디자인 속성 작성
}정확히 무조건 단언코 기억하셔야 합니다 확실하게
. 은 클래스지정 #은 id지정
잊으시면 안됩니다 !
이건 jQuery에서도 그대로 사용됩니다 ㅎㅎ
이정도를 알고 계신다면 기본적인 내용은 다 아는것일거라 생각합니다 감사합니다