'coding/html + css' 카테고리의 글 목록 (15 Page)

[css] 첫 번째 태그 선택하기

안녕하세요. 플입니다. 오늘은 선택자를 이용해 첫 번째 태그를 선택해보겠습니다. 1. html보기 All Responsive PC Etc 먼저 html 코드를 한 번 살펴보겠습니다. 과 를 이용해 만든 리스트입니다. 여기서 첫 번째 태그만 선택해보겠습니다. 2. first-child li:first-child{ margin-left:0; } li:first-child를 이용해 첫 번째 를 선택할 수 있습니다. 첫 번째 에 margin-left:0을 입력해 왼쪽 마진을 없애주었습니다. 이미지를 보시면 첫 번째 만 왼쪽에 여백이 없는 것을 알 수 있습니다. 이렇게 전체가 아닌 한 개만 따로 값을 주고 싶을 때 이런 선택자를 사용합니다. 그럼 이만. 총총.

coding/html + css · 2019. 12. 19. 07:30

[css] display를 이용한 가운데정렬

안녕하세요. 플입니다. 오늘은 가운데 정렬을 조금 다른 방법으로 진행해보겠습니다. 1. display ul li{ display:inline-block; } 옆으로 나열하는 방법은 여러가지가 있는데요. 보통은 float:left를 사용하죠. 하지만 float:left를 사용하면 태블릿이나 모바일 사이즈에서 가운데 정렬을 하기 어려워집니다. 이럴때 display:inline-block;을 사용하면 text-align을 이용해 쉽게 가운데 정렬을 할 수 있습니다. (정말 혁명적...) inline-block은 inline속성과 block속성을 모두 가지고있는데 inline속성이라 각 태그들이 옆으로 나열되고, block속성도 있기 때문에 내부에서는 패딩속성이 잘 들어갑니다. 2. text-align ul{ ..

coding/html + css · 2019. 12. 18. 07:30

[css] 가로 세로 크기 정하기

안녕하세요. 플입니다. 오늘은 요소의 크기를 정해보겠습니다. 1. width p{ width:91px; } 가로사이즈는 width를 이용해 정해줍니다. 가장 많이 사용하는 단위는 px로 현재 숫자만 나와있는 사이즈가 px입니다. p태그는 지금 가로사이즈가 91px이네요. 만약 모바일 등 브라우저 사이즈 변동에 따라 크기를 변화시키고 싶다면 px이 아니라 %로 사이즈를 설정해주세요. 2. height p{ height:94px; } 높이는 height를 이용해 정해줍니다. 이 p태그의 높이는 94px이네요. 가로 사이즈를 정해주는 것과 마찬가지로 px이나 %를 단위로 사용합니다. 그럼 이만. 총총.

coding/html + css · 2019. 12. 16. 07:30

[html] 태블릿 사이즈 설정하기

안녕하세요. 플입니다. 오늘은 html에서 태블릿 사이즈를 설정해보겠습니다. 1. css 불러오기 우선 태블릿 사이즈를 코딩해준 css를 불러옵니다. 일반 css를 불러오는 것과 동일하게 link를 이용해 불러옵니다. rel값은 stylesheet를 입력해주세요. type은 text/css입니다. href는 폴더 경로를 입력해주세요. 저는 css폴더 안에 있어서 css/파일명입니다. 2. media css를 불러온 link 안에 media를 입력해주세요. 값은 only all and (max-width:1297px)을 입력해줍니다. 여기서 max-width값은 브라우저를 줄여보면서 설정해주세요. max-width값이 설정된 기준 아래에서 불러온 css가 적용됩니다. 3. 확인 F12 혹은 오른쪽 클릭 후..

coding/html + css · 2019. 12. 13. 07:30

[html] <colgroup>을 이용해 테이블 비율 고정 하기

안녕하세요. 플입니다. 오늘은 테이블 칸의 비율을 고정해보겠습니다. 1. 기본 우선 비율을 고정하지 않았을 때 모습입니다. 비율을 정해두지 않는다고 테이블 태그가 큰 문제가 있는 것은 아니지만 나중에 내용이 길어질 때마다 비율이 틀어지는 것을 방지할 수 있습니다. 2. colgroup 을 이용해 칸의 비율을 정해줍니다. 은 태그 안쪽에 태그 시작 전에 넣어줍니다. 다른 태그처럼 태그를 넣어준 뒤 안쪽에 을 이용해 칸의 비율을 정해줍니다. 을 칸 개수만큼 만들어 준 뒤 입력값을 width:10%처럼 가로 비율을 정해주면 됩니다. 다 합쳐서 100이 되는 게 계산하기 좋기는 하지만, 상황에 따라 조금씩 조절해주셔도 됩니다. 그럼 이만. 총총.

coding/html + css · 2019. 12. 3. 07:30

coding/html + css 101