본문 바로가기

IT/CSS

CSS - margin & padding 차이점, 사용법 Padding과 Margin의 차이 Padding과 Margin은 자칫 헷갈릴 수 있는 개념이기 때문에 차이를 정확히 알아봅시다. 요소는 아래 그림 처럼 내용(content), 패딩(padding), 테두리(border)로 이루어져 있습니다. 파란 부분이 내용이고, 초록색 부분이 패딩, 그 밖에가 테두리입니다. 패딩(Padding)은 내용(파란부분)과 테두리 사이의 '여유 공간' 입니다. border 까지가 요소이고, Margin은 요소 주위의 여백입니다. 다른 요소와의 사이 공간이라고 할 수 있습니다. Padding을 주는 4가지 방법 Padding을 주는 방법에는 몇 가지가 있습니다. 1. 우선 가장 직관적인 방법은 top, bottom, left, right 를 각각 적어주는 방법입니다. 예시 코드.. 2022. 4. 28.
언어별 주석 처리 방법 (C, JAVA, CSS, HTML, SQL, Python 등) 언어별 주석 처리 기호 모음 ! C, C++, C#, Objective-C ,JAVA, Javascript, R, Go, Kotlin, Swift 의 주석 처리 한 줄 주석은 // 여러 줄 주석은 /* */ // 한 줄 주석 /* 여러 줄 주석 */ HTML , XML 의 주석처리 한 줄도, 여러 줄도 CSS 의 주석처리 CSS 주석은 /* */ /* 영화 제목 */ .movie h1 { color: #4d9fff; text-align: center; font-size: 40px; } /* 영화 줄거리 */ .movie p { font-size: 20px; } Python, Ruby 의 주석처리 파이썬의 경우에 한줄 주석은 # 여러줄 주석은 작은따옴표 3개씩 ''' ''' or 큰 따옴표 3개씩 """ .. 2022. 4. 28.
CSS - '클래스(class)'와 '아이디(id)' 정리 HTML 요소에게 '이름' (별명? 닉네임?) 을 주는 방법은 두 가지가 있습니다 클래스 (class) 아이디 (id) 클래스 (class) 아래 코드에서 첫 번째 태그와 세 번째 태그는 "big" 이라는 이름의 클래스를 갖고 있습니다. 그러면 css에서 .big 에 스타일을 입혀주면 됩니다. 클래스 이름이라는 걸 나타내는 기호는 '.(마침표)' 입니다. First Second Third .big { color: blue; font-size: 48px; } 결과화면 > 아이디 (id) 아래 코드에서 첫 번째 태그는 "test"라는 이름의 id를 갖고 있습니다. 그러면 css에서 #test 에 스타일을 입혀주면 됩니다. 아이디(id) 를 나타내기 위한 기호는 '#(샾 표시)' 입니다. First Secon.. 2022. 4. 28.
CSS - 기본 속성 정리 style, 폰트크기, 텍스트 정렬, 색상, 여백 style 태그 사이트에 CSS 스타일을 입혀주기 위해서 보통 css 파일을 따로 두고 link로 연결해서 쓰지만, 가볍게 바로 확인해 보기 위해서 HTML 상에서 폰트 크기 CSS에서 폰트 크기를 표현할 수 있는 단위가 몇 가지 있는데, 그 중 픽셀(px)이 가장 많이 사용됩니다. Heading 1 Heading 2 결과 화면 > 텍스트 정렬 글은 왼쪽, 가운데, 오른쪽으로 정렬할 수 있습니다. Heading 1 Heading 2 Heading 3 결과 화면> 텍스트 색 글에 색을 입히고 싶을 땐, color 속성을 사용하면 됩니다. Heading 1 Heading 2 Heading 3 결과 화면> 여백 margin 속성을 사용하여, 요소 사이의 여백을 설정할 수 있습니다. 여백의 크기도 픽셀(px) .. 2022. 4. 28.
CSS - 속성 상속 개념과 예시 코드 CSS - 상속개념과 예시 CSS에는 '상속'이라는 개념이 있습니다. '상속'은 말 그대로 부모 요소의 속성들을 자식들한테 그대로 넘겨주는 것입니다. 아래 예시에서 '상속' 개념을 확인해봅시다. .div1의 폰트 색을 blue로 설정해주었습니다. 태그와 태그에 대해서는 별도의 설정을 하지 않았습니다. 그럼에도 불구하고 과 태그의 폰트 색이 파란색으로 설정되었습니다. 그 이유는 .div1 이라는 부모의 스타일이 자식들에게 상속되었기 때문입니다. 상속되는 속성들 모든 태그의 속성이 상속 되는 것은 아닙니다. 태그와 속성에 따라 상속이 되지 않는 경우들도 많이 있습니다. 예를 들어, 부모 태그에 설정한 margin이나 padding이 모든 자식들에게 적용되면 난리가 나겠죠? 아래는 웬만하면 상속되는 몇 가지 .. 2022. 4. 28.
CSS - 속성 단위 px, rem, em, % 사용예시, 계산 기준 CSS에는 폰트 크기, padding, margin, width 등 다양한 속성들에 사용할 수 있는 여러 단위가 있습니다. px, rem, em, % 등이 있습니다. px px는 절대적인 값입니다. 다른 요소의 값에 영향을 받지 않습니다. px 사용 예시 코드> .container { padding-top: 40px; background-color: lime; } rem rem 은 상대적인 값입니다. 어떤 값에 의해 결정 되느냐? 태그의 font-size에 의해 결정됩니다. 3rem은 태그의 font-size의 3배 크기입니다. rem 사용 예시 코드> html { font-size: 20px; } .container { padding-top: 3rem; /* html의 font-size * 3 = 60.. 2022. 4. 28.
CSS 선택자 선택하는 방법 - 태그, 아이디, 클래스, 속성 CSS 선택자를 이용해서 애널리틱스, 구글 태그매니저 등에서 웹페이지 내의 특정 위치를 지정해야 하는 경우들이 있다. 자주 쓰는 CSS 선택자들을 알아보자 1. 태그 이름 특정 태그 전체를 선택하려면 태그 이름을 사용한다. CSS 선택자 의미 li 모든 li 태그 p 모든 p 태그 2. 아이디 특정 아이디의 태그를 선택하려면, 아이디 앞에 #을 붙인다 CSS 선택자 의미 #search 아이디가 search인 태그 #top_menu 아이디가 top_menu인 태그 3. 클래스 특정 클래스의 태그를 선택하려면, 클래스 앞에 . 을 붙인다 CSS 선택자 의미 .pr 클래스가 pr인 태그 .hd 클래스가 hd인 태그 4. 속성 속성의 이름과 값으로 태그를 선택하려면, [name="value"] 형식으로 적는다 .. 2022. 1. 21.
728x90
반응형