식초의 지식보관소

연결 선택자 -선택자와 선택자를 연결해 적용 대상을 한정시킨다 하위 선택자(=자손 선택자) : 지정한 모든 하위 요소 -부모 요소에 포함된 하위 요소 모두에 스타일 적용 -자식, 손자까지 모두 적용 대상이 있으면 표시됨 -빈 칸 #container ul { } 자식 선택자 : 자식 요소만 -바로 아래 요소에만 스타일 적용 - > 부등호 #container > ul { } 인접 형제 선택자 : 가장 가까운 형제 요소 -먼저 나오는 것=형 요소, 나중에 나오는 것=동생 요소 -같은 레벨이면서 첫번째 요소에 스타일 적용 - + 더하기 h1 + ul { } 형제 선택자 : 형제 요소 -모든 형제 요소 - ~ 틸드 속성 선택자 -태그 안에 사용하는 속성들의 값에 따라 스타일 지정 -활용도 높다 [속성] 선택자 :..

CSS 포지셔닝 ~검색창, 로그인창, 광고, 뉴스, 실시간 검색 순위 등을 적절히 배치 ~각 콘텐츠 영역을 어떻게 배치할지를 결정하는 것= float속성, position속성 box-sizing 속성 : 박스 너비 기준 정하기 ~웹문서에 요소 배치하려면 각 요소의 너비를 계산해야 한다 ~콘텐츠 영역(width)값을 계산하기 어렵다면 border-box 지정해 박스모델 너비 계산 border-box: width값=콘텐츠+패딩+테두리 너비 .box1{ box-sizing: border-box; width:300px; height:150px; padding:30px; border: 2px solid red; margin:10px; } content-box: width값=콘텐츠 너비 .box2{ box-sizi..

박스 모델이란? 웹 문서의 내용을 박스 형태로 정의하는 방법. 마진, 패딩, 테두리 등 여러 겹의 박스가 있다. 블록 레벨(block-level)요소 -혼자 한 줄 차지하는 요소 -너비, 마진, 패딩을 이용해 크기나 위치를 지정하려면 블록 레벨 요소여야 한다. -종류: ,,,,,,,,,, 인라인 레벨(inline-level)요소 -콘텐츠 만큼만 영역을 차지, 나머지 공간에는 다른 요소 올 수 있다. -종류: ,,,,, ,,, 박스모델 - 구글>검사>element>computed width, height 속성 : 콘텐츠 영역의 크기 width - 콘텐츠의 너비 height - 콘텐츠의 높이 .box { width: 50%; height: 100px; } ~px, cm, %, auto 속성값 ~%는 부모요소..

글꼴 관련 스타일 : 글자의 모양새, 글꼴, 크기, 굵기 등 font-family 속성 : 글꼴 지정 p{ font-family : "맑은 고딕", 굴림, 돋움 } ~텍스트를 사용하는 요소에서 사용 - ,, 등 ~지정한 글꼴이 없을 경우 대비, 2번째, 3번째 글꼴까지 지정 ~두단어 이상으로 된 글꼴이름은 ""로 묶어준다 ~기본 글꼴, 스타일 속성을 이용해 다른 글꼴 정의 가능 @font-face 속성 : 웹 폰트 사용 ~웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드 시키는 방식 *구글 웹 폰트 사용 ~https://fonts.google.com 에 접속해서 글꼴 선택 > [Select this style] 클릭 > [Emb..

스타일 시트 : 한 문서에서 반복해 쓰이는 스타일들을 모아 놓은 것 스타일 : 글꼴, 색상, 정렬, 배치방법 등 겉모습을 결정하는 내용 장점1 - 내용과 디자인이 구분되어 있기 때문에-> 웹 문서 내용과 상관 없이 디자인만 바꿀 수 있다. http://www.csszengarden.com/ CSS Zen Garden: The Beauty of CSS Design So What is This About? There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in th..

div : block-level , 1줄에 1개씩 span : inline-level, 1줄에 여러개, contents자체만을 꾸며준다-컨텐츠의 크기에 맞춰서 바뀐다 span { display : block; } : 한줄에 하나씩 나온다. div { display : inline-block; : 한줄에 여러개 나온다. } inline : contents자체만을 꾸며준다-컨텐츠의 크기에 맞춰서 바뀐다 inline-block : 지정한 블록단위로 표기가 된다. block : 블록단위로 한줄에 한개씩 POSITION {position : static;} HTML에 정의된 순서대로 브라우저에 보여진다.

CSS 란? -Cascading Style Sheet -style sheet : 잘 정리한 문서 한 장 -cascading : 폭포처럼 넘어가는 것, 정의된 세부사항 있으면 그것을 쓰고, 없으면 다음 지정된 파트로 넘어가는 것 Cascading 종류 -Author style : 개발자가 사용하는 css파일 -User style : 사용자가 지정한 스타일링 -Browser : 브라우저에서 기본적으로 사용하는 스타일링 -순서 : Author style → User style → Browser -! important : cascading의 연결고리를 끊는다. 연결고리를 무시하고 자신이 가장 중요하다고 한다. box구조를 잘못 나눔, bad smell, 안 쓰는 것이 좋다. Selector : html에 어떤 ..

박스모델 {border:1px red solid;} : 테두리, 두께, 색상, 단선(solid)/점선(dotted) _띄어쓰기하면 됨 {padding: 30px;} : 콘텐츠와 테두리 사이의 여백 (안쪽) {margin: 50px;} : 테두리 사이의 상하좌우 간격 (바깥쪽) {width: } : 콘텐츠의 가로 크기 {height: } : 콘텐츠의 세로 크기 구글 크롬 개발자 모드 : 웹상에서 조절 미리보기 가능 박스모델 응용 밑에만 선긋기 - {border-bottom: 1px solid gray;} 여백 만들기 - {padding: 20px;} 오른쪽만 선긋기 - {border-right:1px solid gray;} 콘텐츠 가로 - {width:250px;} 콘텐츠 세로 - {height:600px..

--CSS는 디자인이다.-- : 태그 안에 쓴다, html의 태그이다 : id값이 selected인 태그(li)를 선택해서 효과를 줄 수 있다, id는 html의 속성이다 : class값이 em인 태그(li)를 선택해서 효과를 줄 수 있다 : 태그 안에 쓴다, html의 태그이다. 파일주소에 있는 css 파일을 그 웹페이지에 넣는다. 태그와 다르다. h1{} : 선택자, css의 태그이다 {color:red} : 색깔 설정, 서술, css의 태그이다 {font-size: 10px;}: 폰트 크기 설정, 서술, css의 태그이다 h1,h2{} : h2도 똑같은 효과를 주고 싶다면 콤마로 합치기 nav ol{} : nav 태그 중에서 ol 태그만이다 {list-style: none;} : 리스트 스타일 없앤..