'CSS' 태그의 글 목록 (11 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

[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

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

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

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

[css] hover로 색 바꾸기

안녕하세요. 플입니다. 오늘은 hover를 이용해 마우스 오버 시 색을 변경해보겠습니다. ▷hover hover는 '맴돌다'라는 뜻을 가진 영어단어입니다. 마우스가 위에서 맴돌고 있을 때라고 이해할 수 있습니다. 저는 마우스 오버 시 적용되는 css로 생각하고 작업합니다. ▷사용 이유 hover를 사용하는 건 사용자의 편의를 위해 들어가는 효과입니다. 마우스를 올렸을 때 어떤 효과가 적용되거나 마우스의 모양이 손가락 모양이 되면 사용자들은 '클릭을 하는 부분'이라는 것을 직감적으로 알게 됩니다. 오늘 예시로 사용할 메뉴 색상을 변경하는 것을 살펴보면 마우스를 올렸을 때 색상이 변경되면 사용자는 클릭하는 부분이라는 것을 쉽게 알 수 있습니다. 이처럼 사용자의 클릭을 유도해 조금 더 쉽게 홈페이지를 이용할 ..

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

CSS 56