css background-size ■ HTML 웹 문서의 전체적인 분위기를 위해서 주제와 관련된 이미지나 깔끔한 이미지를 배경으로 많이 사용용 하고, 배경을 그림으로 채우는 과정에서 이미지의 사이즈를 조절해서 적용할 수 있는데요. 이번 글에서는 css의 background-size 속성에 대해서 알아보겠습니다. ■ 속성값으로 사용할 수 있는 것들은 auto, 크기값(px), 백분율(%), cover, contain 등이 있는데요. 위 이미지(600X400)를 이용해서 속성값을 바꿔가면서 어떻게 적용되는지 확인해볼게요. ▲ 본문에 700X500 크기의 박스(div)를 만들고 배경색을 노란색으로 설정했습니다. 이 박스의 배경을 이미지로 채워보겠습니다. 먼저 'auto' 속성인데요. auto는 사진의 원본 ..

html css 자간 줄간격 홈페이지를 만들 때 시각적인 효과를 주기 위해서 여러 가지 스타일 속성을 지정하는데요. 가장 대표적인 게 글꼴 일 겁니다. 물론 글의 내용이 더 중요하겠지만, 눈으로 보기 편하면 더 좋겠죠. 텍스트관련 속성 중에서 이번 글에서는 글자간의 간격과 줄간격 속성에 대해서 알아보겠습니다. 먼저 텍스트 간의 간격을 조절하는 속성은 크게 두 가지가 있는데요. 'letter-spacing'과 'word-spacing'입니다. 단어만 봐도 알 수 있겠지만, 첫 번째는 글자간의 간격이구요. 두 번째는 단어 사이의 간격입니다. 이 속성을 이용해서 예제를 만들어 볼게요. ■ 똑같은 문자열 세 줄을 입력해봤습니다. 첫 번째 단락은 기준으로 그대로 두고, 두 번째는 글자간의 간격을, 세 번째는 단어..

html css float 이번 글에서는 레이아웃을 조절할 때 많이 사용하는 기능 중의 하나인 float에 대해서 알아보겠습니다. 단어의 뜻에서 알 수 있듯이 어딘가 위에 떠 있다는 의미인데요. 이 속성을 이용하면 레이아웃의 배치가 바뀌게 되면 함께 위치가 바뀌게 돼서, 고정되어 있는 것들과는 구분됩니다. 어떤 요소를 문서의 오른쪽이나 왼쪽에 떠 있게 하는 건데요. 이때 해당 요소에 postion 속성을 적용 했다면 absolute를 사용하면 안됩니다. css position 속성에 대해서 좀 더 알고 싶으시면 아래 글 참고 하시면 됩니다. http://godvow.tistory.com/39 ◀◀ [css postion 속성] ■ float 속성을 적용하기 위해서는 스타일에서 [float : left 또..

html css nav ■ html의 시맨틱 태그 중의 하나인 태그에 대해서 알아보겠습니다. 태그는 주로 '메뉴바'를 만들 때 사용하는데요. 링크를 걸어서 홈페이지 내의 다른 문서를 연결하는 역할을 합니다. 이 태그는 header, aside, footer 태그 사용해도 되고, 위치에 구애받지 않고 독립적으로 쓰일 수도 있습니다. 이번 글에서는 nav 태그 안에 ul, li 태그를 이용해서 메뉴를 만드는 과정을 진행하면서 이 태그의 배치에 대해서 알아볼 텐데요. ■ 태그 안에 태그를 배치하면 태그가 블록레벨 요소이기 때문에 세로 배치입니다. 즉 어떤 메뉴들을 입력하면 세로로 배치되는데요. 이 녀석을 가로로 배치할 수도 있거든요. 그 방법을 알아볼게요.■ 간단하게 예제를 만들어봤습니다. 태그 안에 태그를 ..