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

[css] 배경이미지 넣기

안녕하세요. 플입니다. 오늘은 css로 배경 이미지를 넣어보겠습니다. 1. 배경 이미지 우선 배경으로 사용할 이미지를 저장해줍니다. 저는 키캡 모양을 배경으로 사용할 것입니다. 이때 이미지에 배경 부분을 투명하게 하려면 png로 저장해주셔야 합니다. 2. background p{ background:url('../images/sub1_0.png') no-repeat center center; } background를 이용해 이미지를 배경으로 넣어줍니다. 먼저 url을 입력해 이미지를 불러옵니다. 맨 앞의 ..은 웹에 올렸을 때 해당 도메인이 써질 자리입니다. 뒤쪽 부분은 평소 이미지 주소를 적는 것처럼 입력해주시면 됩니다. 그리고 no-repeat를 이용해 반복이 없는 배경 이미지를 만듭니다. 마지막으로..

coding/html + css · 2019. 11. 6. 18:30

[css] 컨텐츠 가운데 정렬하기

안녕하세요. 플입니다. 오늘은 브라우저 사이즈에 관계없이 컨텐츠를 가운데 정렬해보겠습니다. 1. 가로 사이즈 지정 ul{ width:1280px; } 우선 가로 사이즈를 지정해줍니다. 가로 사이즈는 사이트의 기본 사이즈를 정해둔 것이 있을 겁니다. 그 사이즈로 지정해주세요. 저는 1280px을 주었습니다. 최근에는 와이드 모니터가 늘어서 가로사이즈가 점점 늘어나고 있는 추세입니다. 만드는 웹사이트의 성격에 따라 사이즈가 달라지니 여러 상황을 고려해 사이즈를 정해줍니다. 저는 알아보기 쉽게 border를 넣었습니다. 보기 편하게 border를 지정한 상태로 진행하고 마지막에 제거해주셔도 됩니다. 2. 마진 이용 ul{ margin:0 auto; } 마지막으로 마진을 이용해 가운데 정렬을 해줍니다. 마진 값..

coding/html + css · 2019. 11. 5. 22:30

[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

coding/html + css 98