본문 바로가기

언어공부/CSS

 (11)
CSS - 속성 float (div 수평정렬) CSS - 속성 float (div 수평정렬) float float 속성은 요소의 위치를 잡을 때 아주 중요한 역할을 하는 스타일 속성이다. float의 사전적 의미는 물위에 '떠있다'의 뜻을 가진다. 이미지와 텍스트를 함께 배치할 때 이 float 속성은 유용하다. 이미지에 float="left"속성을 주면 이미지는 왼쪽으로 배치되고 뒤따르는 텍스트는 이미지를 감싸며 배치된다. float된 요소는 부모 컨테이너의 가장 왼쪽이나 오른쪽으로 이동한다. float된 요소후에 추가되는 요소는 float 요소를 감싸면서 배치된다. float된 요소 이전에 추가된 요소는 float의 영향을 받지 않는다. float속성으로는 요소를 레이아웃의 왼쪽이나 오른쪽으로만 배치될 수 있다. 위쪽이나 아래쪽으로는 float할..
CSS - 속성 정리 (2) / CSS3 애니메이션 CSS - 속성 정리 (2) Position : static(기본값); => 요소가 순서대로 배치된다. 위치 지정이 필요 없다. absolute => 순서와 상관없이 브라우저 창 내에서 지정한 위치에 나타난다. relative => 직전 요소에 이어서 상대 위치에 배치된다. fixed => 현재 보이는 브라우저 화면 내에서 절대위치에 배치된다. 현재 보이는 브라우저 화면 내에서 항상 같은 위치에 나타난다. 화면을 스크롤 해도 같은 위치에 나타난다. ( 상담, 쪽지 등과 같은 항상 동일위치에 있어야 하는 창을 만들 때 많이 사용된다.) z-index : 여러개의 콘텐츠를 겹쳐서 배치할 때 앞뒤 순서를 결정해주는 속성이다. 큰 수를 지정할수록 앞쪽에 배치된다. 이 속성은 position이 absolute나 ..
CSS - 속성 정리 (1) / 타입 선택자 css CSS - 속성 정리(1) background-color : 배경색 background-image : 배경 이미지를 정의 background-repeat : 배경 이비지의 반복 여부를 지정 (repeat-x; => 수평방향 x축으로 반복 / repeat-y; => 수직방향 y축으로 반복) background-attachment : 배경 이미지가 고정 or 스크롤인지 지정 background-position : 배경 이미지 위치를 설정 background-size : 배경 이미지 크기를 지정 border:2px solid red; => 2 , solid , red 테두리 두께를 2픽셀, 실선, 테두리 선색을 빨강 (+border-top, border-bottom, border-left, border-rig..
CSS 스타일 시트 / CSS 선택자 문법 / CSS를 삽입하는 방법 (외부 스타일 시트방법, 내부 스타일 시트 방법, 인라인 스타일 시트방법) CSS 스타일 시트 CSS Style Sheet html 5 에서는 기존의 css1, css2 뿐만 아니라 css3까지도 완벽히 지원하는 것을 기본 목표로 한다. 기존의 css1, css2에서는 주로 텍스트, 폰트, 배경 및 색상, 목록, 박스 모델 등에 관련된 속성을 다루었다면, css3에서는 2D/3D 변환, 장면 전환, 애니메이션 등 더욱 다양한 스타일 지정 기능을 포함하고 있다. 스타일시트(Style sheet) 는 웹에서 작성한 문서에서 PC화면이나 모바일 단말기 화면에 출력될 외형 스타일을 좀 더 다양하면서 손쉽게 빠르게 적용하기 위하여 사용된다. 스타일시트를 사용하면 콘텐츠 내용과 디자인의 분리가 가능해진다는 점이 큰 장점이다. CSS로 디자인 요소를 별도로 작성하여 다수의 개발자가 동시에 ..
(생활코딩) CSS 코드의 재사용 <link> 우리가 작성한 코드, CSS 코드가 모든 웹페이지에서 중복해서 등장하는 부분이 있으면 수정할 때 일일이 찾아 수정해야 하기 때문에 시간이 많이 걸린다. 코드를 작성할 때, 중복의 제거는 아주 중요하다. 중복을 제거함으로 프로그래밍, 코딩이 얼마나 효율적인지 다시 확인해볼 것이다. 모든 웹페이지에서 중복되고 있는 CSS코드를 태그를 제외한 순수한 CSS 코드만을 복사해서 style.css라는 파일에다가 붙여넣기를 한다. 그리고 html파일에 있는 중복되는 태그의 코드들을 다 삭제한다. 그리고, 태그가 있었던 부분에 style.css라는 별도의 파일에 저장된 CSS를 다운로드 받아서 여기에 원래 그 코드가 있었던 것처럼 동작하게 하는 태그 를 사용한다. 태그를 통해서 이 웹페이지가 어떤 CSS파일과 연결되어..
(생활코딩) CSS 미디어 쿼리 화면의 크기에 따라 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것을 반응형 웹, 반응형 디자인이라고 한다. 이 반응형 디자인을 우리가 순수한 웹을 통해서 CSS를 통해서 구현하는 핵심적인 개념인 미디어 쿼리(Media Query)라는 것에 대해 살펴보자. 화면의 크기에 따라서 어떤 HTML의 요소를 보였다, 안 보였다 하게 해보자. 화면의 크기 800픽셀보다 크냐 작으냐에 따라서 태그를 보이게, 안 보이게 하려면 화면의 크기를 알아야 한다. 화면-오른쪽클릭-검사를 통해서 화면을 조정하면 우측상단에 화면의 크기를 볼 수 있다. 화면의 크기가 800px 이상일 때(screen width>800px), 의 태그를 display:none;으로 만들어 보자. 화면의 크기가 800px보다 크다는..
(생활코딩) CSS 그리드 grid, <div>, <span> CSS의 그리드(grid)에 대해서 알아보자. 일단 박스 모델로 테두리 및 마진, 패딩값을 주어 위의 사진처럼 웹페이지를 구성하였다. 이제 노란색으로 동그라미 친 부분을 목차 옆으로 옮기는 방법으로 그리드로 사용해 보자. 그리드의 이해를 위해 예제를 만들어 보자. Navigation과 Article 각각의 문자에다 테두리를 주고 나란히 배치해보자. 이를 위해서는 각각 어떤 태그로 묶어줘야 하는데, 디자인이란 목적을 위해서 아무런 의미가 없는 태그를 사용해야 한다. 바로 태그, division의 약자이며, 기본 block level element이기 때문에 화면 전체를 사용한다. 똑같은 기능의 태그로 inline elemenet인 태그도 있다. 부피감 확인을 위해 테두리를 둘렀다. 여기서 이 두 글자를 나..
(생활코딩) CSS 박스 모델 (block, inline, border, padding, margin) 박스 모델에 대해서 알아보자. box.html 파일을 새로 만든다. box.html을 열어보면 태그는 화면 전체를 사용하고 있다는 것을 알 수 있다. 여기서 CSS 부분에 태그로 링크를 걸어보자. 태그에서는 화면 전체를 사용하고 있는데, 여기 태그의 경우에는 똑같은 태그임에도 불구하고 줄바꿈이 되지 않고 다른 콘텐츠들과 같은 라인에 위치하고 있다. 이러한 차별은 태그는 제목 태그인데, 제목 태그는 화면 전체를 쓰는것이 기본적으로 더 편리하기 때문이다. 그리고 링크가 앞뒤에 있는 콘텐츠가 줄바꿈이 된다면 상당히 불편하기 때문에 기본적으로 링크는 줄바꿈을 하지 않고 딱 자기의 콘텐츠 크기만큼을 쓴다. 이러한 부분을 시각적으로 확인할 수 있는데 테두리를 그리면 부피감을 알 수 있다. 태그와 태그에 테두리를 줘..

티스토리툴바