[css] 내비게이션(gnb) 만들기 03 - 가로로 정렬하기

안녕하세요. 개자이너 씸플레이입니다. 오늘은 드디어 css를 진행합니다! 1. 기본사항 살펴보기 ① 기본사항 참고사항 : 리스트 데코레이션이나 태그에 적용된 색들은 미리 빼두었습니다. 기본적으로 태그는 블록 태그이기 때문에 글씨가 옆으로 써지지 않고 아래로 써집니다. 원하는 디자인 : 로고 옆으로 카테고리들이 가로로 나열되면 좋겠다. ② 블록 태그 줄 노트를 상상해보세요. 그리고 한 줄이 한 블록이라고 상상해봅시다. 그 한 줄을 혼자서 차지하는 태그가 블록 태그입니다. 카테고리1 라고 적으면 한 줄에 카테고리1이라는 글자만 써야 한다는 의미죠. 2. 내비게이션을 오른쪽으로 ① 원하는 이미지 상상하기 각자 원하는 내비게이션의 이미지가 있을 거예요. 처음은 어렵지 않게 제가 이미지를 보여드리겠습니다. 원하는..

coding/html + css · 2021. 2. 19. 09:30

[css] 마우스 올리면 나타나는 버튼 만들기

안녕하세요. 플입니다. 마우스 올리면 나타나는 버튼의 css를 진행해볼게요. 1. html 보고오기 2020/05/22 - [Try/coding] - [html] 마우스를 올리면 나타나는 버튼 만들기 2. 전체 css li{ float:left; width:30%; margin:0 1%; height:218px; border:3px dashed $sub_color; a{ display:none; position:relative; width:100%; height:218px; text-align:center; background: $sub_color; line-height: 218px; color:$main_color; font-size:28px; font-family:'NanumBarunpen'; fon..

coding/html + css · 2020. 5. 25. 07:30

[css] 드래그 색상 변경

안녕하세요. 플입니다. 오늘은 드래그 색상을 변경해보겠습니다. 1. 기본 사항 확인 먼저 드래그 색상이라는 것은 글을 드래그했을 때 나타나는 색상을 말합니다. 기본으로 나오는 색상을 확인합니다. 많이 알고 계시듯이 드래그된 부분이 파랑 바탕으로 보이는 것을 알 수 있습니다. 2. ::selection ::selection{ background:#ea0e3c; } ::selection을 이용해 드래그 색을 변경해줍니다. ::selection에 배경색을 넣어주면 됩니다. 배경색은 background를 이용해 넣어줍니다. 3. 글자색 변경 ::selection{ color:white; } 글자색이 배경색에 묻혀서 잘 보이지 않는 경우가 발생합니다. 그런 경우를 위해 드래그했을 때 글자색도 지정해줍니다. 다른 ..

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

[css] 배경색과 이미지 동시에 넣기

안녕하세요. 플입니다. 오늘은 배경색과 배경 이미지를 동시에 넣어보겠습니다. 1. 배경 이미지 준비 우선 배경 이미지를 준비합니다. 만약에 여러 개를 규칙적으로 넣을 예정이라면 이름 역시 규칙적으로 정해주면 편하게 작업 가능합니다. 2. 배경 이미지 넣기 span{ background:url(../images/sub1_101.png) no-repeat right center; } 우선 background를 이용해 배경 이미지를 넣어줍니다. url을 이용해 배경 이미지를 넣어주고 위치를 조정해줍니다. 3. 배경 색 넣기 span{ background:url(../images/sub1_#{$i}01.png) no-repeat right center #f21973; } 그다음 background 값 마지막에 ..

coding/html + css · 2019. 11. 14. 07:30

[sass/scss] 오류 확인법

안녕하세요. 플입니다. 오늘은 scss에서 오류 확인하는 법을 알아보겠습니다. 1. 오류 확인 일단 오류가 발생하면 화면에 css가 전혀 적용되지 않은 화면으로 나옵니다. 그리고 가장 위에는 오류 메시지를 띄워주죠. 맨 윗줄에는 에러가 발생한 부분을 알려줍니다. 지금은 .ski5 p에 color 값이 없다고 알려주네요. 실제로 확인해보면 값이 없는 걸 알 수 있습니다. 그리고 몇 번째 줄인지도 정확히 나와있습니다. 2. 오류 수정 오류가 있던 부분을 수정해줍니다. 오류는 컬러코드 입력을 안 했던 것이니까 코드를 입력해줍니다. 3. 확인 수정 후에 확인해보면 다시 css가 잘 들어간 화면이 나오는 것을 알 수 있습니다. scss는 이렇게 오류 확인이 간편합니다. 그럼 이만. 총총.

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