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

[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

[sass/scss] 자동 컴파일하기

오늘은 scss 사용 시 컴파일하는 법을 알아보겠습니다. 1. 실행창 열기 먼저 실행창을 열어줍니다. 시작에서 실행을 검색해 여는 방법과 window + R 단축키를 눌러 여는 방법이 있습니다. *window키는 ctrl과 alt 사이에 있는 키 2. 명령 프롬프트(cmd) 열기 위의 이미지에서 이미 쓰여있었지만 실행창을 열었다면 cmd를 입력해 명령 프롬프트를 실행합니다. 실행하면 이런 명령 프롬프트가 열립니다. 3. 파일 경로 바꾸기 기본은 C로 경로가 잡혀있습니다. 우선 scss작업을 할 폴더로 경로를 옮겨줍니다. 저는 D폴더에 있어 일단 d로 경로를 이동했습니다. d로 경로를 이동할 땐 d:이라고 입력합니다. 엔터를 누르면 이렇게 D드라이브로 이동됩니다. 다음은 cd명령어를 이용해 scss를 실행..

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

coding/html + css 100