본문 바로가기
728x90
SMALL

전공수업52

[CSS] 박스 모델(border, border-redius, padding, margin) * border: 테두리 설정border-style: 테두리 스타일 지정value: solid, dashed, dotted, double, groove, inset, outset border-width: 테두리 두께 지정value: px, %, thin, medium, thick border-color: 테두리 색상 지정value: color 코드 예시 1오른쪽 코드처럼 border 속성을 한 줄에 한 번에 쓸 수도 있다.   코드 예시 2 코드 예시 3상하좌우 속성을 따로 지정할 수 있다. * border-radius: 엘리먼트 코너 둥글게 하기  * padding, margin크기 값을 2개 사용하는 경우: 상하, 좌우ex) margin 30px, 50px; 크기의 값을 4가지 사용할 경우: 상, 우.. 2024. 7. 22.
[CSS] 자손 선택자, 자식 선택자 * 코드 예시자식 선택자 .box > divbox 클래스 바로 아래에 있는 직계 자식인 div에 스타일을 적용.'>' 기호는 직계 자식 관계를 나타낸다. 자손 선택자 .box > div divbox 클래스 바로 아래에 있는 직계 자식인 div 안에 있는 자손 div에 스타일 적용.'>' 기호 없이 스페이스바로 후손 관계를 나타낸다. 2024. 7. 22.
[CSS] 텍스트 스타일(line-height, font-style, text-decoration, text-transform) * 텍스트 행간 높이 설정 line-height line-height를 px단위로 설정행 간의 높이가 설정된 것을 확인할 수 있다.하지만 line-height를 px로 설정하면 폰트사이즈에 맞게 커지거나 줄어들지 않고 px 크기만큼 고정되기 때문에, em 단위를 사용하는 것이 좋다.  line-height를 em 단위로 설정 * font-style  * 선으로 텍스트 꾸미기 text-decoration밑줄 underline 윗줄 overline 취소선 line-through * text-transform첫 글자를 대문자로 변환 capitalize  대문자로 변환 uppercase 소문자로 변환 lowercase * 목록 스타일 list-style 2024. 7. 20.
[CSS] Selector(선택자) * 들어가기에 앞서, CSS 링크하기CSS 링크하기link 태그로 css 파일 링크하기. 백그라운드 컬러와 폰트 사이즈 및 색상 설정.  * Selector(선택자) 기본 실습p: 태그 선택자.center: 클래스 선택자#center: 아이디 선택자    p.center: p 태그 중 center라는 클래스 이름을 가진 것 선택   연결 선택자(,)속성과 값이 같을 경우 연결 선택자(,)를 사용하여 한번에 작성 가능.   하위 선택자 * 선택자 적용 우선순위1. !important 스타일2. 인라인 스타일3. 아이디 셀렉터 스타일4. 클래스 셀렉터 스타일5. 태그 셀렉터 스타일 동일한 CSS 속성이 중복 사용될 경우, 왼쪽의 우선순위에 따라 적용된다.  아이디 선택자에 green을 적용했지만, 인라인 선.. 2024. 7. 20.
728x90
LIST