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

[sass/scss] 다른 scss 불러오기

안녕하세요. 플입니다. 오늘은 scss에서 다른 파일을 불러와보겠습니다. 1. 불러올 파일 만들기 먼저 불러올 파일을 만듭니다. 불러올 것이 아무것도 없으면 안되겠죠? 불러올 파일의 이름은 되도록 메인으로 사용할 scss와 이름이 겹치지 않게 해주시고 가장 앞에 _(언더바)를 입력해줍니다. _이름.scss 위의 형식처럼 적어주세요. 가장 앞에 언더바를 적으면 이 파일은 컴파일되지않고 나중에 컴파일은 메인으로 사용하는 파일에 한꺼번에 됩니다. 이건 _base.scss의 내용입니다. 하지만 컴파일은 main.css에 같이 되는 것을 알 수 있습니다. 이게 한꺼번에 컴파일되는 경우입니다. 이렇게 관리를 하면 수정은 편하면서 용량은 가볍게 관리가 가능합니다. 2. 메인 파일에 불러오기 불러올 파일을 만들었다면 ..

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

[css] 타이틀 코딩하기

안녕하세요. 플입니다. 오늘은 포트폴리오 서브페이지 타이틀 코딩을 해보겠습니다. 저번 포스팅에 이어서 오늘은 css코딩을 해보겠습니다. https://ssimplay.tistory.com/90 [html] 타이틀 코딩하기 안녕하세요. 플입니다. 오늘은 포트폴리오 서브페이지 타이틀을 코딩을 해보겠습니다. 1. 전체 디자인 확인하기 우선 시안을 보고 전체 디자인을 확인합니다. 제 시안을 살펴보면 세 가지 특징을 알 수 있습니다.. ssimplay.tistory.com 저번 포스팅 링크를 걸어두겠습니다. 1. 전체 디자인 확인하기 시안을 계속 참고해가며 진행하는 것은 중요합니다. 가야 하는 길의 지도와 같다고 생각해요. html에서 코딩해준 대로 div, h3, p 태그에 디자인을 넣어줘야겠네요. 2. div..

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

[html] 타이틀 코딩하기

안녕하세요. 플입니다. 오늘은 포트폴리오 서브페이지 타이틀을 코딩을 해보겠습니다. 1. 전체 디자인 확인하기 우선 시안을 보고 전체 디자인을 확인합니다. 제 시안을 살펴보면 세 가지 특징을 알 수 있습니다. 첫 번째, 전체적으로 가운데 정렬이다. 두 번째, 큰 제목과 소제목이 있다. 세 번째, 배경이 있다. 기본 틀이 되는 html은 논리적으로 코딩하는 것이 중요함으로 세가지 특징을 생각하면서 코딩하도록 합니다. 2. 코드 구상하기 구상한 코드를 이미지화해봤습니다. 첫 번째로 배경을 넣어주려면 감싸주는 태그가 필요하겠죠. 간단히 div로 감싸주기로 합니다. 감싸주는 태그는 여러 경우가 있지만 사이즈를 맞춰야 하니 block태그인 것으로 하는 것이 좋습니다. 두 번째로 큰 제목은 서브 페이지의 주제입니다...

coding/html + css · 2019. 10. 28. 07:30

[html/css] 버튼만들기

안녕하세요. 플입니다. 오늘은 버튼 태그를 이용해 버튼을 만들어보겠습니다. 1. 버튼 만들기 더보기 일단 버튼 태그를 이용해 버튼을 만들어줍니다. 버튼 태그를 이용해 코드를 작성하면 자동적으로 이미지와 같은 디자인이 됩니다. 우선 이것을 리셋시켜서 일반 디자인으로 변경하고 시작합니다. button{ background:none; border:0; } 배경과 보더를 빼줍니다. 기본 css를 이렇게 설정하고 디자인을 하는 편이 편합니다. 적용하면 이런 모양입니다. 2. 태그 디자인 .btn{ @extend %width_auto; text-align:center; margin-top:24px; display:block; } 태그에서는 우선 위치를 잡아줍니다. %width_auto{ width:1280px; m..

coding/html + css · 2019. 10. 2. 07:30

[css] position을 이용해 반투명 배경 올리기

안녕하세요. 플입니다. 오늘은 position 활용법을 알아보겠습니다. position을 이용해 포토샵의 레이어처럼 층을 하나 올려 반투명한 배경을 만들어 볼 것입니다. 이런 식으로 이미지 위에 단색이지만 약간 투명도가 있어 밑의 이미지가 보이는 모습을 만들 것입니다. 1. 기본 재료 준비 기본적으로 html에서 이미지와 위에 올릴 요소 한 가지가 있어야 합니다. 제 코드는 이런 식으로 되어있습니다. 태그에 배경을 주어서 위로 올려줄 예정입니다. 2. position position:relative; 우선 relative를 이용해 레이어처럼 층을 만들어줍니다. relative란 '관련 있는'이라는 영어단어로 position값을 준 요소의 부모 태그와 관련이 있다고 생각하면 쉽습니다. 위치가 부모 태그의 ..

coding/html + css · 2019. 9. 26. 07:30

coding/html + css 101