본문 바로가기

CSS

 (12)
[css] text, border, font 1. text 1) text-align * 키워드 값 text-align: left; text-align: right; text-align: center; text-align: justify; 예1 ) 예2 ) 타이틀 설명 -> 블럭요소 자체는 가운데 처리 불가능 그 안에 자식들 : 인라인, 인라인블럭, 텍스트만 중앙 정렬됨 -> 이럴 경우 margin 활용해 중앙 정렬 가능 2) text-indent 3) line-height : 행간 2. border 1) border 스타일 border-style: none; border-style: solid; 기본선 border-style: dotted; 점선 border-style: dashed; 살짝 긴 점선 테두리 color border-color: red..
[css] margin, padding * margin / padding / box-sizing 구조 1. margin : 요소 밖의 영역 * margin 명령어 ( margin-top, margin-right, margin-bottom, margin-left ) -> 시계 방향이 기본 * 속기법 margin : 위, 오른쪽, 아래, 왼쪽 ; -> 기본형 margin : 위, 오른쪽, 아래 ; 왼쪽 -> 오른쪽 값 적용 margin : 위, 오른쪽 ; 아래 -> 위쪽 값 적용 왼쪽 -> 오른쪽 값 적용 margin : 위 ; 상하좌우 모두 동일값 * margin : auto; 값 활용 # 박스 가운데 정렬 3가지 방법 (1) -> 좌/우 일정하게 맞춤 처리 (2) (3) 2. padding / box-sizing : 요소의 안쪽 영역 -> b..
[css] 선택자 우선순위 * 우선순위 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선적으로 적용할 지 결정하는 방법 1. 점수가 높은 선언의 우선순위가 높다. 2. 점수가 같다면, 가장 마지막에 해석된 (나중에 작성된) 선언의 우선순위가 높다. * 점수 기준 1. important (!) :무한대(가장 높은 점수) 2. style 속성을 html에 인라인 선언 : 1000점 -> 개발자가 요구할 때만 인라인 선언 3. id 선택자 (#) : 100점 4. class 선택자 (.) : 10점 5. 가상선택자 : 10점 6. 태그 선택자 : 1점 7. 전체 선택자 (*) : 0점 * 주의사항 - 스타일은 위에서 아래로 내려간다 (마크업 순서대로 스타일 작성 권장) - 아이디는 유일성 / 아이디는 경로 표시..
[css] css 문법, 선택자 * 스타일 (Style ) 스타일(style) : HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 디자인을 변경 스타일 시트(style sheet) : 스타일을 관리하기 쉽도록 한 군데 모아놓은 것 -> 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있음 * 캐스캐이딩 스타일 시트(Cascading Style Sheets : css ) 캐스캐이딩(Cascading) : ‘위에서 아래로 흐른다’는 뜻 여러 스타일이 적용될 때 스타일 충돌을 막기 위해 ‘위에서 아래로 흐르며 적용되는’ 방법을 선택 ① 스타일 우선순위 - 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되고 우선순위에 따라 위에서 아래로 스타일 적용 ② 스타일 상속 - 태그들의 포함 관계에 따라 부모 요..

티스토리툴바