728x90 반응형 CSS6 [CSS] 마진 병합 마진 병합 현상형제지간의 마진 병합형제지간에 margin속성이 겹치는 경우 margin-bottom과 margin-top 중 숫자가 큰 값으로 적용250px가 아닌 150px의 공백을 갖게 됨 부모 자식간의 마진 병합자식인 뿐만 아니라 부모인 에도 영향을 미침자식에게 margin을 적용하면 부모에게도 적용이 됨 레이아웃에 영향을 미치는 속성displayBlock과 Inline 요소의 성격을 바꿀 때 사용inline-block을 사용하면 두 요소의 성격을 모두 가짐 float같은 선상에서 왼쪽 끝 정렬, 오른쪽 끝 정렬레이어가 겹치지 않는 상태로 왼쪽에서부터 나란히 정렬시키고 싶은 경우 float: left;을 연속적으로 입력선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시키고자 할 때 사용이름 그대로 선택.. 2024. 1. 22. [CSS] 박스모델 박스모델박스 모델 구조 margin과 padding의 차이margin : border 바깥쪽의 여백을 정의padding : border 안쪽의 여백을 정의속성은 네가지(right, top, bottom, left)padding값을 수정하면 전체 공간의 크기가 달라짐을 유의 (공간이 여백을 포함한 크기로 변경)top right bottom left 순서(시계방향)로 한 줄에 작성 가능padding의 상하 값은 10px, 좌우는 0을 넣고 싶다면, padding: 10px 0;처럼 쓸 수도 있음 padding 주기 전padding 적용 후margin 적용 후보통 padding으로 텍스트 들여쓰기함 margin: auto;로 좌우 중앙정렬도 가능 Block 요소와 Inline 요소Block 요소의 특징 태그가.. 2024. 1. 19. [CSS] 주요 속성 캐스케이딩css의 우선순위를 결정하는 세가지 요소1) 순서 : 나중에 적용한 속성값의 우선순위가 높음 → blue적용2) 디테일 : 더 구체적으로 작성된 선택자의 우선순위가 높음 → red 적용3) 선택자 : style > id > class > type 순으로 우선순위가 높음 → pink 적용 CSS 주요 속성 width속성 : 선택한 요소의 넓이를 설정 - 고정값(px), 가변값(%) - 부모의 크기에 영향을 받음heigt속성 : 선택한 요소의 높이를 설정font-size : 글자크기 → body는 기본 16pxfont-family : 서체 선택, 브라우저마다 지원하는 폰트가 다름(폰트 대체를 위해 ,로 여러개의 폰트를 기입함, 마지막에 sans-serif를 디폴트로 입력 - 모든 브라우저에서 지원하.. 2024. 1. 17. [CSS] 부모 자식 관계 자손선택자 예시 첫번째 단락 두번째 단락 자식선택자 예시 첫번째 단락 두번째 단락 상대 크기해상도에 따라 px의 절대적 크기는 달라지므로 상대적 크기를 사용하는 것이 좋음 부모 요소 기준% : 비율em : 배수rem : 최상단 부모기준 배수 이 텍스트는 부모 글꼴의 1.5배크기의 글꼴입니다. 이 텍스트는 부모 글꼴의 150%크기의 글꼴입니다. 둘 다 30px 2024. 1. 16. [CSS] 선택자 태그 선택자 적용 클래스 선택자 1 클래스 선택자 2 id 선택자 ⇒ id 선택자가 가장 우선순위 높음 → 클래스 → 태그 모듈식 CSS 방식 사용 - 중첩적용각 class마다 별도의 디자인이 정의되어있을 때, 공백으로 추가하여 스타일을 조합할 수 있음 font style과 font size 중첩적용1 font style과 font size 중첩적용2 2024. 1. 15. [CSS] 적용 방법 CSS(Cascading Style Sheet)CSS 구성 요소선택자 : 디자인을 적용할 HTML 영역 → h1, p 등..속성 : 어떤 디자인을 적용할지 정의속성값 : 어떤 역할을 수행할지 구체적으로 명령, 세미콜론(;)필수 입력 CSS 적용방법 세가지1) Inline Style Sheet (인라인 스타일링)태그 안에 직접 원하는 스타일을 적용 1. 배경색 변경 2. 글자색 변경 3. 글자크기 변경 4. 복합 스타일링 2) Internal Style Sheet (내부 스타일링)태그 안에 넣기 3) External Style Sheet (외부 스타일링)태그로 .css파일 불러오기→ html, css 각각의 문서 안에서 따로 관리하여 상대적으로 가독성이 높고 유지보수가 쉬움 ⇒ 인라인 스타일링이 가장 우선.. 2024. 1. 12. 이전 1 다음 728x90 반응형