웹/CSS
-
[CSS] 적용방법웹/CSS 2023. 1. 6. 20:27
1. 적용방법 a. 인라인 스타일(inline style) 방식 HTML 태그마다 style 속성으로 CSS 코드를 넣어주는 방식입니다. 여러 요소들에 공통 속성을 재사용하여 부여할 수 없고 HTML 코드와 CSS 코드가 분리되지 않기 때문에 특별한 경우를 제외하고는 사용되지 않습니다. b. 내부 스타일 시트(internal style sheet) 방식 head 태그 안에 style 태그를 두고 그 안에 CSS 코드를 작성하는 방식입니다. HTML과 CSS의 전체 코드량이 많지 않고 CSS가 해당 HTML 문서에서만 적용될 경우 유용하게 사용될 수 있습니다. c. 링킹 스타일 시트(linking style sheet) 방식 외부의 CSS 파일을 HTML 문서에 연결하는 것입니다. HTML과 CSS의 코드..
-
CSS 스타일 속성 - display, border-radius, margin, padding웹/CSS 2022. 9. 13. 08:33
display :block, inline 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정합니다. border-radius 테두리 경계의 꼭짓점을 둥글게 만듭니다. 하나의 값을 사용해 원형 꼭짓점을, 두 개의 값을 사용해 타원형 꼭짓점을 적용할 수 있습니다. margin 요소의 네 방향 바깥 여백 영역을 설정합니다. margin-top, margin-right, margin-bottom, margin-left의 단축 속성입니다. padding 요소의 네 방향 안쪽 여백 영역을 설정합니다. padding-top, padding-right, padding-bottom, padding-left의 단축 속성입니다. 출처 : h..
-
CSS의 형식 - HTML의 스타일과 스타일 시트 (HTML 꾸미기)웹/CSS 2022. 8. 29. 13:59
이번엔 HTML 문서를 꾸미는 방법에 대해 알아보려고 합니다. CSS를 사용하는 이유, 목적 웹의 스타일(글꼴, 색상, 정렬 등)을 결정하기 위해 CSS를 사용합니다. 웹 문서의 내용과 상관없이 디자인을 설정할 수 있습니다. 기기에 맞게 탄력적으로 문서를 만들 수 있습니다. CSS의 형식 태그 후 선택자와 중괄호({}) 안에 스타일 속성과 속성값을 적어줍니다. 주석은 /* */를 사용합니다. 스타일 규칙은 세미콜론(;)으로 구분합니다. 가시성을 위해 여러 줄에 작성하는 경우가 많습니다. 외부 스타일 시트 스타일 규칙이 많을 경우 또는 같은 규칙을 여러번 사용할 경우 사용합니다. css 규칙들을 하나의 파일에 작성한 후 확장자를 css로 저장합니다. html의 태그 안에 문구를 추가합니다. 선택자 전체 선..