웹 프로그래밍/CSS 범범조조 2020. 12. 11. 00:00
안녕하세요. 오늘은 CSS에서 크기(Dimension)을 사용하여 HTML의 요소를 마음대로 설정할 수 있는 방법에 대해서 공부해 보려고 합니다. CSS에서 크기(Dimension) 속성의 종류는 아래와 같습니다. 1. height 2. width 3. max-width 4. min-width 5. max-height 6. min-height 크게 6개의 속성들이 있습니다. 위의 속성들을 CSS로 사용해 보도록 하겠습니다. 예제 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 HTML 연습 - 범범..
더 읽기
웹 프로그래밍/CSS 범범조조 2020. 12. 10. 00:00
안녕하세요. 오늘은 CSS에서 박스모델의 대해서 알아 보려고 합니다. 박스모델이란 모든 HTML 요소는 박스 모양으로 구성되어 있는데요. 바로 이러한 구성을 박스모델이라고 부른다고 하네요. 박스모델은 크게 Padding, Border, Margin, Content 로 구분됩니다. 각각의 설명은 아래와 같습니다. 1. Content : 텍스트나 이미지가 들어있는 박스의 실질내용 핵심 내용 2. Padding : 내용과 테두리 사이의 간격을 나타냅니다. 3. Border : 내용과 패딩 주변을 감싸는 테두리를 나타냅니다. 4. Margin : 테두리와 이웃하는 요소 사이의 간격을 나타냅니다. 그럼 위의 4가지의 박스 모델을 CSS로 직접 표현해 보도록 하겠습니다. 예제 코드 1 2 3 4 5 6 7 8 9 ..
웹 프로그래밍/CSS 범범조조 2020. 12. 7. 00:00
안녕하세요. 오늘은 CSS에서 테이블을 다양하게 꾸미는 방법에 대해서 연습해 보려고 합니다. 제가 따로 HTML 카테고리에 테이블 만드는 포스팅을 올려 뒀었는데요. 거기서 테이블을 보면 아무런 색상 없이 매우 칙칙한 그냥 오리지널 테이블을 나타내 주고 있는데, CSS를 이용하여 테이블도 여러가지로 디자인 할 수 있더라구요! 그래서 이번엔 CSS로 테이블 꾸미는 연습을 해보도록 하겠습니다. 예제 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 HTML 연습 - 범범조조 h1{ color: ..
웹 프로그래밍/CSS 범범조조 2020. 12. 6. 00:00
안녕하세요. 오늘은 CSS에서 리스트를 다양하게 만드는 방법에 대해서 연습해 보려고 합니다. 리스트 앞에 Mark를 다양하게 표시해 주는 방법부터, 리스트를 안쪽, 바깥쪽 위치 조정까지 할 수 있게끔 CSS를 작성해 보도록 하겠습니다. 예제 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 HTML 연습 - 범범조조 .circle { list-style-type: circle; } .square { list-style-type: square; } .upperAlpha { l..
웹 프로그래밍/CSS 범범조조 2020. 12. 5. 00:00
안녕하세요. 오늘은 CSS에서 링크를 다양하게 만드는 방법에 대해서 연습해 보려고 합니다. 항상 C#만 주구장창 했다가..HTML과 CSS를 하려니까 상대적으로 적응하는데 좀 시간이 필요한 것 같지만.. 그래도 나름 꽤? 재미를 붙이는 중이라서 얼릉 HTML과 CSS에 익숙해져서 JavaScript까지 빠르게 학습해 ASP.NET으로 본격적으로 웹을 만들어 보고 싶네요..ㅎㅎ 서론이 길었습니다. 바로 CSS를 이용하여 다양한 링크를 만들어 보도록 하겠습니다. 예제 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 HTML 연습 - 범범조조 h1 { color: green; ..
웹 프로그래밍/CSS 범범조조 2020. 12. 4. 00:00
안녕하세요. 오늘은 HTML 문서에 CSS 적용하는 방법들에 대해서 알려 드리려고 합니다. HTML문서에 CSS 적용하는 방법은 크게 3가지가 있는데요. 1. 인라인 스타일 2. 내부 스타일 시트 3. 외부 스타일 시트 위와 같이 3가지의 방법이 있습니다. 각각의 스타일을 예제 코드를 통해서 보여 드리도록 하겠습니다. 인라인 스타일 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 HTML 연습 - 범범조조 인라인 스타일 시트 방법 안녕하세요. 지금은 인라인 스타일 시트 방법 예제 입니다. Colored by Color Scripter cs 실행 결과 내부 스타일 시트 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26..
웹 프로그래밍/CSS 범범조조 2020. 12. 3. 14:35
안녕하세요. 오늘부터는 HTML 공부와 함께 CSS도 병행해서 공부하려고 합니다. CSS란 Cascading Style Sheets의 약자로써, 쉽게 말해서 스타일 시트 언어입니다. CSS를 사용하는 이유는 HTML의 디자인을 조금 더 간결하고 쉽게 하기 위함인데요. 오늘은 그 첫번째 시간으로써, CSS 선택자에 대해서 알아보고 어떻게 그럼 CSS를 사용하여 HTML 요소를 꾸미는지 예제를 통해서 알아 보도록 하겠습니다. CSS 선택자는 크게 4가지 경우가 있습니다. 1. HTML 요소 선택자 2. 아이디 선택자 3. 클래스 선택자 4. 그룹 선택자 크게 4가지의 선택자가 있습니다. 그럼 CSS 위의 4가지 선택자의 사용 방법을 예제 코드를 통해서 보여 드리도록 하겠습니다. 예제 코드 1 2 3 4 5 ..