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

[css] 미디어쿼리로 반응형웹 제작하기

css에서 미디어 쿼리를 이용해 반응형 웹을 제어해볼게요. 1. html 반응형 ① html - 일단은 간단하게 html을 작성해봤어요. - 예시로 사용할 거라 간단하게 하나만 만들었습니다. - [! + Tab]을 누르면 html 기본 구조를 간단하게 불러올 수 있습니다. 자세한 사항은 아래에 링크로 달아둘게요. 2. pc 사이즈 css *{ margin:0; padding:0; } .reactive{ width:100%; height:300px; background:lightcoral; text-align: center; line-height: 300px; font-size: 24px; color:white; } ① 기본 css - pc 사이즈는 그냥 평소대로 코딩을 해줍니다. - 저는 보기 좋게 간단..

coding/html + css · 2021. 7. 13. 09:30

[css] 홈페이지 코딩 내비게이션 바 07 - 간격 조정

이제 마무리된 디자인에서 여백, 색 등을 조금씩 다듬어보겠습니다. 1. 내비게이션 바 메인 메뉴 ① 문제점 확인 내비게이션 바의 메뉴가 위쪽으로 딱 붙어서 답답한 느낌이 듭니다. 세로 기준으로 가운데쯤 왔으면 좋겠네요. #header{ line-height:60px; } ② line-height 이용 line-height는 줄 간격이지만 글이 한 줄만 있을 때는 가운데 위치로 만드는 게 아주 안성맞춤입니다. 값은 세로 값을 동일하게 넣어주세요. 2. 서브 메뉴 ① 문제 파악 줄 간격을 부모 태그에 입력해 서브도 적용되는 문제가 있네요. 배경색이 없어 눈에 잘 들어오지 않는다는 문제도 있습니다. 로고 카테고리 카테고리1 하위1 하위2 하위3 하위4 카테고리2 카테고리3 하위1 하위2 하위3 카테고리4 카테..

coding/html + css · 2021. 3. 15. 09:30

[css] 홈페이지 코딩 내비게이션 바 06 - 색을 넣어보자

안녕하세요. 개자이너 씸플레이입니다. 홈페이지를 직접 코딩해보는 시간입니다. 구조를 거의 잡은 내비게이션 바에 색을 넣어봅시다. 1. 배경색 ⓛ 색 조합 정하기 홈페이지 의뢰 내용에 따라 색 조합이 조금씩 달라지겠지만 오늘은 연습이니까 컬러헌트에서 예쁜 색을 골라볼게요. 컬러헌트 사용방법은 아래 포스팅을 참고해주세요. [꿀정보] 컬러조합 사이트 컬러헌트 안녕하세요. 플입니다. 오늘은 컬러 조합 사이트 하나를 소개해드릴게요. 1. 컬러 헌트 https://colorhunt.co/ Color Hunt - Color Palettes for Designers and Artists Color Hunt is a free and open platform.. ssimplay.tistory.com ② 해더 정리정돈이나 ..

coding/html + css · 2021. 3. 8. 09:30

[css] 내비게이션(gnb) 만들기 05 - 가운데 정렬

안녕하세요. 개자이너 씸플레이입니다. 사실 헤더 부분 전체를 가운데 정렬하는 것이지만 일단 제목을 이렇게 적어봤어요. 1. 여백 확인 ① 현재 상황 파악 지금까지 잘 따라오셨다면 로고와 카테고리가 각각 양 옆으로 붙어있을 겁니다. 그런데 뭔가 이상하죠? 다른 사이트들을 보면 글자는 중앙에 있고 양쪽은 여백인 곳이 많을 거예요. 그렇습니다. 너무 끝에 몰려있다는 생각을 하셨을 거예요. 2. 태그 추가 ① 태그 추가 컨텐츠가 있는 영역과 여백이 있는 영역 두 개가 필요하기 때문에 콘텐츠를 한 번 더 감싸줍니다. 감싸주는 태그로는 태그를 사용했습니다. 래핑 단축키는 Ctrl + Shift + P 입니다. >래핑 설명 보러가기margin: 0 atuo; 설명 보러가기

coding/html + css · 2021. 3. 4. 09:30

[css] 내비게이션(gnb) 만들기 04 - 마우스 올릴 때만 나오게 하기

안녕하세요. 개자이너 씸플레이입니다. 하위 카테고리가 평소에는 가려져있다가 마우스를 올렸을 때만 나오게 만들어보겠습니다. 1. 감추기 ① 감출 부분 확인 감추고 싶은 부분을 확인해봅니다. 하위 카테고리는 평소에는 보이지 않다가 마우스를 올리면 보이게 만들고 싶습니다. ② display:none; display는 말 그대로 어떻게 보이는지를 결정할 수 있는 css 속성입니다. 속성 값으로 none을 쓰면 없다. 즉, 보이지 않게 됩니다. 여기서 문제는 선택자를 어떻게 잡으면 좋을까 하는 것입니다. css는 선택자만 잘 잡아도 코드를 깔끔하게 작성할 수 있습니다. 좋은 방법을 항상 발견하려고 노력해봅시다. .gnb>li ul{ display:none; } ③ 클래스를 기준 일단 기준점이 있다면 한결 편합니다..

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

coding/html + css 98