Dung--[CSS HTML]
-
CSS 선택자의 종류와 활용방법Dung--[CSS HTML] 2023. 5. 3. 17:59
CSS 선택자의 종류와 활용방법 CSS 표만들기 및 테두리 꾸미는 방법 CSS 표만들기 및 테두리 꾸미는 방법 1. CSS 테두리 만드는 속성 테두리는 border 속성으로 만듭니다. table,th,td요소에 적용하실 수 있습니다. tr요소에는 적용이 되지 않습니다. 2. 기본모양 아무런 꾸 dsmotion.tistory.com CSS 표꾸미기, 정렬하는 방법 CSS 표꾸미기, 정렬하는 방법 1. CSS 표 관련된 정렬 방법 표에 관련된 정렬방법에는 표 정렬, 셀 안의 내용가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본적인 모양은 1)표 : 왼쪽 정렬 2)제목 dsmotion.tistory.com CSS 테이블 꾸미기, 표 크기 설정하는 방법 CSS 테이블 꾸미기, 표 크기 설정하는 방법 1. ..
-
CSS기초 변수를 활용하기Dung--[CSS HTML] 2023. 5. 3. 16:00
CSS기초 변수를 활용하기 CSS 표만들기 및 테두리 꾸미는 방법 CSS 표만들기 및 테두리 꾸미는 방법 1. CSS 테두리 만드는 속성 테두리는 border 속성으로 만듭니다. table,th,td요소에 적용하실 수 있습니다. tr요소에는 적용이 되지 않습니다. 2. 기본모양 아무런 꾸 dsmotion.tistory.com CSS 표꾸미기, 정렬하는 방법 CSS 표꾸미기, 정렬하는 방법 1. CSS 표 관련된 정렬 방법 표에 관련된 정렬방법에는 표 정렬, 셀 안의 내용가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본적인 모양은 1)표 : 왼쪽 정렬 2)제목 dsmotion.tistory.com CSS 테이블 꾸미기, 표 크기 설정하는 방법 CSS 테이블 꾸미기, 표 크기 설정하는 방법 1. CSS..
-
css 상속에 대한 정의와 속성Dung--[CSS HTML] 2023. 4. 28. 16:45
css 상속에 대한 정의와 속성 1. 상속(inheritance) CSS 속성은 상속하는 속성과 상속하지 않는 속성으로 되어있습니다. 상속은 자식 요소에 형향을 끼칩니다. 상속하지 않는 속성은 자식 요소에 영향을 끼치지 않습니다. 2. 상속하는 속성 예를 들자면 color는 상속하는 속성입니다. 부모 요소에서 정한 색상이 자식 요소에도 적용이 됩니다. Lorem Ipsum 일경우, Lorem 뿐 아니라 Ipsum의 색상도 파란색이 됩니다. 3. 상속하지 않는 속성 예를 들자면 padding은 상속하지 않는 속성입니다. 부모 요소에서 padding을 정의하여도 자식 요소에 적용이 되지 않습니다. Lorem Ipsum 일 경우 p요소만 안쪽 여백을 만들고 em 요소에는 안쪽 여백을 만들지 않습니다. 4. 활..
-
CSS의 !important 활용하기Dung--[CSS HTML] 2023. 4. 28. 16:02
CSS의 !important 활용하기 css는 같은 속성을 여러번 정의 하였을때, 나중에 설정한 값이 적용됩니다. 만약 나중에 설정한 값이 적용이 되지 않게 하려면 속성값 뒤에 !important 를 붙이셔야 합니다. property: value !important; 예를 들어서 다음은 마지막에 설정한 color의 값이 blue이기에, red는 무시하고 문단의 글자색상을 파란색으로 만들어 줍니다. p { color: red; } p { color: blue; } 다시 속성값을 재설정을 하고 싶으시다면 !important를 다시 붙여넣습니다. 예를 들어 다음은 문단의 글자색을 녹색으로 만들어줍니다. p { color: red !important; } p { color: blue; } p { color: g..
-
css 기초 여러가지 문법 만들기Dung--[CSS HTML] 2023. 4. 27. 16:14
css 기초 여러가지 문법 만들기 1. 문법 가장 간단한 CSS 코드 입니다. h1 { color: red } h1, color, red 세가지의 단어가 있는데 각각 선택자, 속성, 값이라고 합니다. - 선택자 : 무엇을 꾸밀지 정합니다. h1은 h1요소를 꾸미겠다는 말입니다. - 속성 : 어떤 모양을 꾸밀지를 정합니다. color는 색상을 꾸미겠다는 말입니다. - 값 : 어떻게 꾸밀지를 정합니다. red는 빨강색으로 만들겠다는 말입니다. CSS 코드는 아래와 같이 구성됩니다. selector { property: value } 이때에 property 와 value를 합쳐 선언(declaration)이라고 부릅니다. 2. 여러개의 선언 세미콜론( ; )으로 구분하며 선언을 여러개 넣으실 수 있습니다. h..
-
CSS를 HTML에 적용하는 방법 및 설명Dung--[CSS HTML] 2023. 4. 26. 18:45
CSS를 HTML에 적용하는 방법 및 설명 HTML에 CSS를 적용하는 방법에는 3가지가 있습니다. 각 방법은 장단점이 있으니 상황에 맞추어 적절한 방법을 선택합니다. - Inline Style sheet HTML 태그의 style 속성에 CSS 코드를 넣어서 사용하는 방법 - Internal Style sheet HTML 문서 내의 안에 CSS 코드를 넣는 방법 - Linking Style Sheet 별도의 CSS 파일을 만들고 HTML 문서와 연결을 하는 방법 ※ 일반적으로 Linking Style Sheet를 기본적으로 사용을 하고, 특정 문서에만 적용되는 스타일은 Inline Style sheet 또는 Linking Style Sheet으로 만듭니다. 1. Inline Style sheet Inl..
-
CSS 테이블 꾸미기, 표 크기 설정하는 방법Dung--[CSS HTML] 2023. 4. 25. 17:34
CSS 테이블 꾸미기, 표 크기 설정하는 방법 1. CSS 표와 셀의 기본 크기 표와 셀의 크기는 정해져 있지가 않습니다. 내용이 짧다면 작은 크기로, 내용이 길다면 크게 표와 셀이 형성이 됩니다. 의도하지 않은 결과가 나오지 않게 하기위해서 크기를 설정하는것이 좋습니다. 크기를 직접 설정할 떄 사용하는 속성은 width 속성 그리고 height속성입니다. 다음은 크기를 파악하기 위하여 테두리만 추가한 간단한 표입니다. 여기서 스타일을 추가하여 크기를 변경하여 보도록 하겠습니다. Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor 2. CSS 표의 가로 크기 설정 표의 전체 가로 크기를 설정하고 싶다면 table 요소의 가로 크기를 width 속성으로 정합니다..
-
CSS 표꾸미기, 정렬하는 방법Dung--[CSS HTML] 2023. 4. 25. 17:08
CSS 표꾸미기, 정렬하는 방법 1. CSS 표 관련된 정렬 방법 표에 관련된 정렬방법에는 표 정렬, 셀 안의 내용가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본적인 모양은 1)표 : 왼쪽 정렬 2)제목 셀(th) 안의 내용 가로 정렬 : 가운데 정렬 3)내용 셀(td) 안의 내용 세로 정렬 : 왼쪽 정렬 4)셀 안의 내용 세로 정렬 : 가운데 정렬 Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor 2. CSS 표정렬 표를 가운데 정렬하고자 할때는 margin 속성을 활용합니다. 좌우 margin 속성값을 auto로 정합니다. 표를 오른쪽으로 정렬하고자 할때는 float 속성을 활용합니다 속성의 값은 right로 설정합니다. 3. 셀 안의 내용을 가로..