css 질문


여태까지 제가 아는 css 문법이랑 조금 달라서 질문 드립니다

< div class="w3-container w3-pale-blue w3-leftbar w3-border-blue"> London is the capital city of England. < /div>

class 선택자에 이름을 주고 그 이름을 빼서 다른 스타일 파일에서 스타일을 변경해 나갔는데요 저 코드는 선택자 큰따음표 안에 박스와 색상을 선택자로 정의해서 왜 저렇게 되는지 이해가 안가네요

그리고 박스를 만들려면 border,height,width 등으로 조정해 가면서 만드는데 저기 container 라고 하면 바로 만들어지네요, 왜그런거죠?

  • 2016년 07월 12일에 작성됨

조회수 220


1 답변


좋아요
2
싫어요
채택취소하기

oocss 를 말씀하시는거 같은데 맞나요?

class="cname" 단일 클래스로 정의해서 스타일을 지정하게 되면 재사용성이 떨어집니다. 공통으로 사용되는 스타일의 경우 각 객체마다 중복으로 스타일을 지정해줘야 되서요. 때문에 공통으로 사용되는 것은 객체 형태로 만들어 재사용 하도록 합니다.

class="box blue"  
class="box red"  

.box {width:400px; height:300px;}  
.blue {background-color:blue;}  
.red {background-color:red;}  

http://mytory.net/archives/8949

  • 2016년 07월 12일에 작성됨

  • 제가 질문드린 내용을 대충 찾아보니 w3-css 는 반응형 웹 과 더 쉬운 코딩을 도와주는 문법이라는것을 알게 되었습니다. 예를 들어 class 선택자에 네임과 원하는 스타일 문법을 넣어주면 바로 적용이 되더군요 이게 맞는지는 잘 모르는데 혹시 아신다면 답변 부탁드립니다. 그리고 oocss 는 뭔가요?    kafka   2016.7.12 23:01     
  • 찾아보니 w3-css 는 CSS 프레임워크라고 하네요. 말씀하신 대로 반응형 웹이 가능합니다. 트위터에서 공개한 부트스트랩도 프레임워크인데, 이건 CSS뿐만 아니라 자바스크립트 영역도 포함되어있습니다. 프론트엔드 프레임워크라고 부를수 있습니다. 이런 프레임워크는 정형화된 형태를 만들어 놓고 재사용 하도록 배포 된 것입니다. 그렇기 때문에 프레임워크만 페이지에 포함 시키면 clsss="w3-container" 등과 같이 CSS를 따로 지정하지 않더라도 스타일이 적용 되는 것입니다. 그러니깐 예로 들면
    라고 하면 되는 것을
    .box {width:30px; height:30px;} .blue {background-color:blue;} 형태로 사용하는 것 입니다. 이런 방식을 oocss 라고 합니다. 객체 형태로 만들어서 재사용 할 수 있도록 하는 것이라고 생각하시면 됩니다. 이 부분은 html페이지에 포함 시킬 수 도 있고 따로 확장자 css로 파일을 만들어서 페이지에 포함 시킬 수도 있습니다.
        Manki Kim   2016.7.13 10:05     

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close