송조의 웹개발 공부

오늘은 CSS 바깥여백(margin), 안 여백(padding), 경계선 내용을 정리해 볼 것이다. 와 개졸려 와~~~~ 이렇게 입력 가능. 근데 height를 지정할 경우, 박스의 내용이 길면 삐져 나오게 된다. 이렇게 이런 상황을 overflow라고 한다. 그럼 네 가지로 overflow를 조정하면 된다. 1) visible 보통 브라우저가 태그 밖으로 넘치는 내용을 처리하는 값이다. 2) scroll 항상 스크롤이 생긴다는 단점이 있다. 3) auto 스크롤바가 필요 시에만 나타날 수 있게 한다. 4) hidden 박스 밖으로 넘치는 부분은 표시되지 않지만 float을 사용해 레이아웃을 잡을 때 유용하게 사용할 수 있다. 최소/최대 속성 정하기 만약 페이지 폭을 최소 760픽셀로 하되 1200픽셀 ..

오늘은 나머지 분량 정리하는 시간.. 밖에 비가 진짜 많이 온다. 나가지 말고 그냥 정리나 할껄 은 나갔다 와서 리프레쉬하고 와서 더 잘 정리할 수 있을 거 같당 :) 1. 줄 간격 조정하는 법 ine-height 속성을 사용하면 텍스트의 줄간격도 조정할 수 있다. line-height를 크게 설정할수록 줄 간격은 더 넓어진다. font-size와 마찬가지로 한 줄의 높이는 픽셀이나 em 또는 퍼센트 단위로 지정할 수 있다. 2. 텍스트 정렬 text-align 속성을 사용하면 왼쪽이나 오른쪽, 양쪽에 정렬시킬 수 있다. text-align: center; 양쪽 정렬된(justify) 텍스트는 인쇄 용도에 맞다. 3. 첫 줄 들여쓰기, 바깥 여백 제거 픽셀이나 em 단위를 사용해서 첫 줄 들여쓰기를 할 ..

와 진짜 분량 개많다.. 오늘은 CSS 텍스트에 대해 정리를 할 것이다.. 내가 새로 알게 된 정보 위주로 정리 예정. 1. 서체의 사용 CSS는 텍스트의 서식을 지정하는 다양한 방법을 제공한다. 서체를 정하고, 서체의 색상과 크기, 줄 간격 등 다양한 속성을 조정하고 표제어나 글머리 기호 목록, 일반 텍스트 단락에 시각적이 효과를 더할 수 있다. CSS 스타일에 서체를 명시할 땐 font-family 속성을 사용한다. p { font-family: Arial; } 하지만 최근 들어 브라우저는 웹 서체(Web Font)를 지원한다. 사이트를 볼 때 다운되는 서체를 웹 서체라고 한다. 웹 서체도 font-family 속성을 사용하지만, @font-face 지시어(directive)라는 CSS 명령어를 사용..

와... 졸립다. 오늘은 하향법칙(cascade)을 정리해보고자 한돠.. 하향법칙은 어떤 요소에 어떤 스타일의 속성을 적용할지 결정하는 규칙의 집합을 말한다. 한 태그에 여러 스타일이 적용될 때 어떻게 처리하고, CSS 속성 충돌이 발생할 때 어떻게 해소할지 결정하는 웹 브라우저를 위한 규칙이다. 1. 계승되는 스타일은 누적된다 계승되는 모든 스타일의 모여 하나의 하이브리드 스타일(hybrid style)을 구성한다. 만약 이런 스타일이 있다면~ body { font-family: Verdana, Arial, Helvetica, sans-serif; } p { color: #F30; } strong {font-size: 24px; } 태그는 body와 p의 스타일을 모두 물려받는다. 최종적으로 정리해보면..

오늘 정리할 거는 스타일 계승인데.. 사실 당연한 걸 왜 정리하나 싶을 수도 있당. 그만큼 당연하게 여겨지지만, 완전 기초적이고 중요한 거니까!!! 잘 알아둘 필요가 있다.... 휴..... =^ㅅ^= CSS에서 계승은 어떤 CSS 속성이 태그 안에 중첩된 다른 태그에 되물림되는 과정이다. 예를 들어서 태그의 하위 태그는 태그에 적용된 CSS 속성을 물려 받는다. 하지만 속성을 안 물려받는 경우도 있는데~ 1) 페이지 내에 요소를 배치하는 위치에 영향을 주는 속성이나 여백, 배경색, 외곽선은 계승되지 않는다. 2) 웹 브라우저의 내장 서식은 적용이 안 된다. (예: 링크가 파란색으로 표시되는 것) 또한, 이나 처럼 표제어 또한 여전히 단락 텍스트보다 크게 출력될 것이다. 3) 또한, 스타일끼리 충돌이 발..

오늘은 스타일을 부여할 요소를 식별하는 아주아주 기본적인 방법을 정리해보려고 한당. 혼자 책보고 공부하면서 정리하는 내용~ 1. 태그 선택자: 페이지 단위 스타일링 태그 선택자, 요소 선택자는 같은 페이지에 있는 동일한 html 태그에 같은 스타일을 적용할 수 있다. 예를 들어 h2 선택자를 입력하면 같은 페이지 내의 모든 h2 태그에 같은 스타일을 적용할 수 있다. h2를 선택자로 갖는 CSS 스타일을 정의하면, 해당 페이지의 모든 h2가 표시되는 방식을 제어할 수 있다. 2. 클래스 선택자: 정밀 조준 클래스 선택자는 html 태그와는 상관없이, 스타일을 조정할 요소를 정밀하게 골라낼 수 있다. 만약 태그 안에 포함된 단어 몇 개에만 클래스 선택자를 적용하고 싶다면 태그의 도움을 받아야 한다. 참고로..

CSS 스타일과 스타일시트 만드는 법~ 공부한 내용 정리. 1. 태그 내장형 스타일 사용하기 태그에 style을 입력하는 방법이다. 이렇게 h1에 회색 글씨가 적용된 것을 볼 수 있당. 2. 내부 스타일 시트 작성하기 내장 스타일보다 나은 방법으로, 여러 요소를 컨트롤하는 CSS 스타일을 담는 스타일시트를 만드는 방법! 내부 스타일시트는 내장 스타일시트보다 더 편리하다. 맨 위에 한꺼번에 스타일을 모아두기 때문에 만들기도 쉽고 유지, 보수하기도 수월하다. 을 입력한다. 그런다음 아래와 같이 효과를 주면 된당. 효과가 들어간 것을 확인할 수 있당. 3. 외부 스타일시트 작성 앞서 만든 스타일을 별도의 외부 스타일시트로 분리하는 작업도 있다. 외부 스타일시트는 내부 스타일시트보다 훨씬 더 간편하다. 웹 사이..