CSS3 border-radius
HTML & Javascript
2014. 12. 25. 15:54
CSS3 border-radius ■ HTML로 웹 문서를 만들 때 이미지나 텍스트 단락을 태그를 이용해서 테두리를 만들어주는데요. 이 테두리의 기본 속성은 사각형입니다. 하지만 CSS3에서는 border-radius 속성을 이용해서 모서리를 둥글게 만들 수 있습니다. 이번 글에서는 이 radius의 속성값들을 알아보겠습니다. 먼저 예제로 사용할 박스를 하나 만들게요.■ 간단하게 가로 세로 400픽셀의 파란색 배경과 빨간색 테두리의 박스를 만들어봤는데요. 이 박스를 이용해서 테두리를 둥글게 만들어보겠습니다. 위 예제의 소스는 다음과 같습니다. ■ 속성에서 border-radius 값을 넣어서 변화를 줄 텐데요. 이때 속성값으로 넣을 수 있는 것들은 크기값(px) 또는 백분율(%) 입니다. 값은 순서대로 ..
HTML5 CSS 작성 및 링크
HTML & Javascript
2014. 12. 24. 08:27
HTML5 CSS 작성 및 링크 ■ 웹 문서에서 뼈대를 이루는 게 html이라면 스타일을 정의하는 부분은 css(스타일시트) 인데요. css를 html과 같은 문서에 작성할 때는 태그 안에 태그를 만들어서 그 안에 작성하면 되는데요. 간단한 웹 문서라면 이렇게 작성해도 되지만, 적용할 스타일의 양이 많다면 소스가 길어져서 조금 복잡해지는데요. 이렇게 복잡하고 긴 스타일시트를 작성할때는 외부 파일로 만들어서 html 문서와 연결을 해주면 되거든요. 그 연결방법에 대해서 알아볼게요. 먼저 하나의 문서에 html과 css를 함께 작성할 때의 위치부터 정확히 알고 넘어갈게요. ■ html 문서 내부에서 css를 작성할 때는 태그 안에 태그를 작성하고 그 안에 작성해주시면 됩니다. 다음은 외부 스타일 시트를 작성..
HTML CSS border 속성
HTML & Javascript
2014. 12. 23. 21:05
HTML CSS border 속성 ■ 웹 문서에 어떤 요소를 넣을 때 다른 요소들과 구분하기 위해서 테두리를 만들어주면 보기 좋은데요. 이번에는 테두리에 해당하는 border의 속성들에 대해서 알아보겠습니다. 이것의 속성에는 선의 종류, 두께, 색 등이 있는데 이것들을 따로 사용해서는 나타나지 않다가 모든 속성값이 입력됐을 때 비로소 선이 나타나게 되는데요. ■ 예를 들어 선의 두께만 지정해주면 선은 안보입니다. border-style (선의 종류)를 지정해줘야 비로소 선이 보이게 되구요. 이 이후에 테두리의 색을 지정해줘야 색까지 보이게 됩니다. 하지만 이것들을 한번에 모두 묶어서 표시하면 바로 보이게 되는데요. 이 속성값들을 한번에 묶어서 지정할 때의 형식은 다음과 같습니다. border : (두께)..
CSS3 margin과 padding
HTML & Javascript
2014. 12. 23. 04:10
CSS3 margin padding ■ 웹 문서를 만들 때 전체적인 구조나 디자인이 중요하고 이것들을 배치할 때 서로 간의 간격을 적절히 유지하는 게 웹 문서의 전체적인 분위기를 좌우하게 되고, 요소 간의 적당한 간격은 가독성에도 많이 도움이 되는데요. 각 요소의 간격을 조절해주는 게 margin과 padding 입니다. 이 두 속성에 대해서 알아보도록 할게요. ■ 먼저 padding과 margin이 뭔지 확실하게 이해하기 위해서 그림을 하나 보겠습니다.■ 이 그림은 현재 본문에 박스를 하나 만들고 그 안에 이미지를 하나 넣은 상태 인데요. 의 테두리를 검은색 실선으로 처리했습니다. 이때 테두리를 기준으로 바깥쪽 그러니까 박스와 웹 브라우저와의 거리가 [margin] 입니다. 그리고 박스 안쪽에 있는 이..
반응형 웹 디자인 유동형 레이아웃
HTML & Javascript
2014. 12. 22. 23:03
반응형 웹 디자인 유동형 레이아웃 ■ N-Screen 시대에는 특정한 크기로만 홈페이지를 만들면 안 되기 때문에 반응형 웹 디자인이 뜨고 있는데요. 지난 글에서는 미디어쿼리를 이용해서 반응형 웹을 만드는 원리에 대해서 알아봤습니다. 이번에는 유동형 레이아웃에 대해서 알아보도록 할게요. 미디어쿼리의 원리에 대해서 알고 싶으면 아래 글 참고하시면 됩니다. ▶ 미디어쿼리 : http://godvow.tistory.com/46 ■ 유동형 레이아웃이란 홈페이지의 요소의 크기가 화면의 크기에 따라서 변하게 되는 원리인데요. 일반적으로 홈페이지를 만들 때 픽셀 단위로 본문의 크기나 사이드 바 등을 만듭니다. 이렇게 크기가 고정되어 있으면 PC, 태블릿, 스마트폰에서 볼 때 모두 같은 화면으로 보이기 때문에 사용자가 ..
반응형 웹 소스 미디어쿼리 기본 원리
HTML & Javascript
2014. 12. 22. 17:21
반응형 웹 소스 미디어쿼리 기본 원리 ■ 요즘은 PC보다는 스마트폰으로 웹 페이지를 보는 일이 더 많을 겁니다. 이런 환경에 맞게 웹 문서를 만들 때는 PC 환경뿐만 아니라 스마트폰, 태블릿 등의 환경도 신경을 써서 제작해야 하는데요. 사용하는 기거에 따라서 그 기기에 맞는 웹 디자인을 적용해주는 기능을 하는 게 미디어쿼리입니다. 이번 글에서는 미디어쿼리의 형식과 원리를 알아보도록 하겠습니다. ■ 먼저 미디어쿼리의 형식의 기본 구문은 다음과 같습니다. @media all and (min-widht : 320px) and (max-width : 767px) { 적용할 CSS 속성}가로 너비가 320px~767px일때는 이 스타일을 적용하게 하는 것입니다. 가로의 사리즈를 보면 핸드폰으로 볼 때 화면이라고 ..