CSS - table-layout 테이블 크기 고정 시키기 fixed, auto 차이

table-layout 속성은 테이블 레이아웃을 정의할 때 사용하는 알고리즘을 선택합니다auto, fixed 가 있습니다.table.a { table-layout: auto; width: 300px}table.b { table-layout: fixed; width: 300px} table-layoutauto 브라우저에서 자동 테이블 레이아웃 알고리즘을 사용합니다.테이블 열의 크기는 테이블이 깨지지 않는 선에 한해서 가장 넓은 내용으로 설정됩니다. fixed고정 테이블 레이아웃 알고리즘을 사용합니다.테이블 내에서 첫 행의 너비로 지정되고, 나머지 행의 너비는 영향을 끼치지 않습니다.만약에 첫 행의 너비가 없으면, 콘텐츠 내부 내용과는 상관없이, 모든 행이 동일한 너비를 가지게 됩니다. 성능 차이fi..

• format_list_bulleted Develop/CSS
• · 2024. 6. 20.
• textsms

Span 태그 수직 / 수평 정렬하는 3가지 방법

span 태그는 inline 요소로 그룹화를 하거나 주로 텍스트에 스타일을 줄때 많이 사용합니다. div 태그내에 있는 span 태그 수직/수평 정렬하는 3가지 방법에 대해서 알아보도록 하겠습니다. 1. Flex 이용 아래 속성들을 div에 적용하면 내부 요소들이 수직 / 수평 정렬 할 수 있습니다. display: flex; justify-content: center; // 수평 align-items: center; // 수직 Hello Superman .ex1 { display: flex; justify-content: center; align-items: center; } 2. height, line-height 이용 div 요소 height 적용하고, 내부 span 태그에 div 적용한 heigh..

• format_list_bulleted Develop/CSS
• · 2023. 12. 1.
• textsms

Tailwind 설치 방법 사용법 장단점 CSS와 비교

Tailwind 란? Tailwind는 CSS를 HTML 코드에서 class이름으로 이용하여 스타일을 생성하고 작성합니다 클릭하세요 장점 생산성 최적화 HTML과 CSS 파일을 두 개를 열어놓고 작업하지 않아도 돼서 작업 속도가 빠르고, 다양한 에디터에서 자동완성 기능을 제공합니다. 또 CSS 파일 크기가 감소하여, 로딩 속도 향상에도 도움을 줍니다. CSS 파일을 만들게 되면, 스타일을 주기 위해 클래스 이름을 뭐로 할까 고민을 하게 되는데, 그런 시간도 줄일 수 있습니다. 단점 예쁘지 않은 코드 스타일 많게 되면, 코드가 길어지게 되고, 예쁘지 않게 되고 이해하기 어렵습니다. 타이틀 내용 확인 클래스명 학습 런닝 커브 처음 사용하게 되면, 클래스명을 외워서 사용해야 하는데, 조금 공부가 필요합니다 초..

• format_list_bulleted Develop/CSS
• · 2023. 10. 17.
• textsms

CSS - Gap 속성 사용법 margin과의 차이점

Gap이란? grid와 flex 요소 행과 열에 간격을 지정할 수 있습니다. margin은 요소 외부에 여백이 생성되지만, gap 속성은 요소 내부에 지정 됩니다. margin은 첫번째, 마지막 요소에 여백을 제거하기 위해서 first-child, last-child 구문을 쓰기도 하였지만, gap 요소 내부에 간격이 생기기 때문에 간편하게 사용할 수 있습니다. 단, ie 브라우저에서는 지원하지 않습니다. 사용법 { gap: 10px; } { gap: 10px 20px; // row-gap, column-gap } 예시 See the Pen Untitled by powerku (@powerku) on CodePen.

• format_list_bulleted Develop/CSS
• · 2023. 10. 14.
• textsms

CSS 자식 margin이 부모에게 적용 될 때, 마진 상쇄 현상

CSS 스타일에 마진 상쇄 규칙이 있습니다. 인접하는 요소, 부모 자식 요소에서 더 큰 마진으로 결합되어 마진이 상쇄 되는 현상이 있습니다. 자식 margin-top이 부모 요소의 margin에 적용 될때 Hello, Superman p태그의 margin이 div 요소 내부에서 적용되지 않고, div 상단에 margin이 적용 되고 있습니다. 부모와 자식을 구분하는 내용이 없어서, 자식 요소의 마진이 부모에게 결합되는 현상입니다. ​ 구분하는 내용은 overflow, padding, inline 속성을 보고 판단하게 됩니다. ​ 해당 현상을 해결하기 위해서는 div 태그에 div { overflow: hidden | auto; padding-top: 1px; margin-top: -1px; border:..

• format_list_bulleted Develop/CSS
• · 2023. 10. 9.
• textsms

CSS - li 태그 가로 정렬 하고 구분선 넣기 "게시판 | 방명록 "

ul과 li 태그에서 가로 정렬 이후 li 태그 사이에 구분선을 넣어보도록 하겠습니다. 구분선은 :before와 :after 선택자를 이용해서 content 속성을 이용해 보도록 하겠습니다. ul li를 만들어줍니다. superman batnman pororo style 속성을 적용합니다 ul { list-style: none; } li { float: left; margin-right: 10px; } li:first-child:before { content: " | "; width: 1px; height: 20px; background-color: #000000; margin-top: 7px; } li:after { content: " | " width: 1px; height: 20px; backgro..

• format_list_bulleted Develop/CSS
• · 2023. 3. 3.
• textsms

HTML iframe 이용해서 다른 사이트 가져오기

iframe 이란? iframe은 다른 웹사이트나, 다른 HTML을 삽입할 때 사용합니다. 간단하게 이 포스트에 iframe을 이용하여서 카카오 지도를 올려보겠습니다. map.kakao.com 사이트를 가지고 왔습니다. 아래와 같이 iframe 태그 내에 src 속성에 본인이 띄우고 싶은 사이트의 url을 작성하면 사이트를 띄울 수 있습니다. 네어버나, 구글 같은 경우에는 iframe으로 띄울 수 없게 막아 논 것 같습니다. 403 에러가 뜨더군요. src 속성 변경 src 속성을 변경하게 되면, 변경 된 url로 사이트가 변경되게 됩니다. iframe에 내용을 변경할 수 도 있씁니다. const frame = document.querySelector('iframe'); frame.setAttribute..

• format_list_bulleted Develop/CSS
• · 2023. 2. 8.
• textsms

CSS 자주 사용하는 선택자 모음

자주 사용하는 CSS 선택자에 대해서 소개드리겠습니다. css를 작성하다 보면 어디에 스타일 주어야 할지 정해야 하는데요. 선택자를 이용하여 스타일을 적용할 요소를 정할 수 있습니다. 전체 선택자 모든 요소에 다 적용이 됩니다. * 를 이용해서 사용합니다. * { color: red; } 유형 선택자 특정 태그에 적용이 됩니다 div, span 태그 등을 이용합니다. 해당 태그에는 모두 적용이 됩니다. div { width: 200px; } span { display: inline-block; } ID 선택자 요소의 ID에 적용이 됩니다. ID 앞에 #을 적어서 사용합니다. CSS를 사용하는데 ID 선택자는 꼭 필요한 경우가 아니면 사용하지 않는 것이 좋습니다. ID를 이용하게 되면 다른 요소에는 적용이..

• format_list_bulleted Develop/CSS
• · 2023. 1. 19.
• textsms

CSS - border-style 테두리 스타일 주기

CSS 테두리 스타일 주는 방법에 대해서 알아보겠습니다. border-style 속성이 있는데 테두리에 스타일을 적용할 수 있습니다. 4가지 속성을 소개 시켜드리겠습니다. solid : 일반적인 기본 선입니다. dotted : 점선입니다. dased : 직사각형 선입니다. double : 두줄 선입니다. 아래 처럼 적용할 수도 있습니다. .border { border-style: solid; } 아래와 같이 css border 속성 두 번째에 스타일 적용할 수 있습니다. border 속성은 [두께, 스타일, 색상]입니다. .border { border: 1px solid black; } 아래 border-style을 적용한 예시입니다. See the Pen Untitled by Young Jun Koo ..

• format_list_bulleted Develop/CSS
• · 2023. 1. 17.
• textsms

CSS - 가운데 정렬 하는 방법

1. flex 이용하여 가운데 정렬 display: flex 설정 justify-content: center 설정 내부 엘리먼트 크기가 바깥 엘리먼트 크기보다 작아야합니다. .box3 { display: flex; justify-content: center; border: 1px solid black; } .box3 span { text-align: center; width: 50%; } 예시 HTML 삽입 미리보기할 수 없는 소스 2. div 엘리먼트 가운데 정렬하기 margin: auto 사용하기 Hello 예시 HTML 삽입 미리보기할 수 없는 소스 3. 글자 가운데 정렬하기 text-align: center 사용 Hello 예시 HTML 삽입 미리보기할 수 없는 소스

• format_list_bulleted Develop/CSS
• · 2019. 3. 18.
• textsms