'coding' 카테고리의 글 목록 (46 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

[반응형] 포트폴리오 사이트

안녕하세요. 플입니다. 오늘은 포트폴리오 사이트 서브 시안을 소개해보겠습니다. 1. 첫 번째 서브 페이지 About 첫 번째 페이지는 두 단락으로 나눠 경력과 기술 능력을 한 페이지에 보여줬습니다. 배경색을 다르게 해 단락을 확실하게 구분했습니다. 2. 두 번째 서브 페이지 Portfolio 두 번째 페이지 시안은 메뉴를 수정하기 전에 저장해서 첫 번째 페이지가 강조되어있지만 넘어가겠습니다. 두 번째 서브 페이지는 작업물을 보여주는 페이지로 이 사이트에서 가장 중요한 페이지입니다. 메인과 동일한 섬네일을 사용하였고 메인에서 더보기를 누르면 넘어오는 페이지입니다. 서브 페이지에서 더보기를 누르면 더 많은 작업물을 볼 수 있습니다. 그리고 메인과 다르게 카테고리를 추가해 카테고리별로 살펴볼 수 있게 만들었습..

coding/개발 팁 · 2019. 10. 29. 07:30

coding 265