본문 바로가기

전체 글

 (97)
CSS (7) position 속성 - HTML 태그의 위치 설정을 변경할 때 사용한다. 키워드 설명 static 위에서 아래 순서로 배치 relative 초기 위치 상태에서 상하좌우로 위치를 이동 absolute 절대 위치 좌표를 설정 fixed 화면을 기준으로 절대 위치 좌표를 설정 - absolute의 기준은 부모요소에서 position이 relative 되어 있는 곳이다. - 기준이 될 부모요소는 height 속성을 적용해야 한다. - 너비,높이가 100px인 상자 3개를 만들고 부모요소에 position:relative 값을 준 후, 2번 상자에 position:absolute를 주면 아래 그림처럼 바뀌게 된다. - 2번과 3번이 겹쳐서 잘 확인이 안되기 때문에 3번 상자의 크기를 150px로 바꿔보았다. -..
:hover 실습 - 3가지 상품이 있을 때, 이미지에 마우스를 hover하면 안보이던 글자가 나타나게 해야한다. - opacity 값을 0을 준다음, hover하게 되면 opacity 값을 1로 바뀌게 되면 아래 그림처럼 안보이다가 나타나게 된다. - transition을 이용하여 나타는 시간을 빠르게하거나 느리게 할 수 있다.
애니메이션 - 너비와 높이가 150px인 상자를 만들고 그 위를 도는 원을 만들었다. - 애니메이션을 통해서 위치를 정해주고 계속 반복하고 한 바퀴가 끝나면 반대로 돌게 설정했다. - 처음에는 red로 시작하고 마지막은 pink로 끝나게 된다.
CSS (6) 박스 속성 - margin : 테두리 영역의 바깥쪽 영역이다. - border : 박스의 테두리 영역을 나타낸다. - padding : 테두리 영역의 안쪽 영역이다. - width : 글자를 감싸는 영역으로 너비 값을 설정할 때 사용한다. (618px) - height : 글자를 감싸는 영역으로 높이 값을 설정할 때 사용한다. (37px) - 너비, 높이 값이 100px, margin, padding 값이 10px, border 값이 5px인 박스를 만들었다. 이때의 박스의 영역은 너비, 높이로 설정한 100x100px이 아니라 margin, padding, border 값이 더해진 150x150px이다. 전체 너비(높이) = width(height) + 2 x (padding + border + mar..
CSS (5) display 속성 이름 설명 none 태그를 화면에서 보이지 않게 한다. inline 태그를 inline 형식으로 만든다. block 태그를 block 형식으로 만든다. inline-block 태그를 inline-block 형식으로 만든다. - div 태그는 대표적인 block 형식이고 span 태그는 대표적인 inline 형식이다. 위의 그림에서 처럼 block 형식을 가진 div 태그는 가로값을 100%로 가지게 되고 inline 형식은 글자의 크기만큼만 가로값을 가지고 있다. - 이때, display 속성을 이용하여 span 태그에 block 형식을 주게되면 가로값을 100%를 가지게 된다. - 다음으로 div 태그에 inline-block 형식을 주게되면 아래 그림처럼 inline 형식처럼 보이..
CSS (4) 배경 삽입 배경 : 이미지, 색 등을 삽입할 수 있다. - 배경의 크기는 background-size를 사용하며, auto, contain, cover, 가로값 세로값, %를 입력하여 조절한다. auto: 기본값으로 원래 이미지의 사이즈로 삽입된다. contain: 요소 안에 배경 이미지가 들어오도록 이미지를 확대한다. cover: 이미지가 요소를 모두 덮도록 너비, 높이 모두 확대 또는 축소해서 이미지를 맞춘다. 가로값 세로값: 값을 입력하여 이미지의 크기를 조절한다. %: 백분율은 요소의 사이즈에 맞게 이미지의 크기를 구해 이미지를 확대하거나 축소한다. - 배경 이미지는 background-image를 사용하여 웹페이지에 이미지를 삽입할 수 있다. - 위의 이미지에서 2번째 줄을 보면 배경 색이 입력..
CSS (3) CSS 스타일 속성 상속 - 상속은 상위(부모) 요소에 적용된 속성을 하위(자식) 요소도 똑같이 적용받는 것을 의미하며, 폰트 속성은 상속되는 특징이 있다. ​ 폰트 - 글꼴(font-family) : 하나의 글꼴만 설정할 수 있고 여러개의 글꼴을 같이 설정할 수도 있다. 단, 여러개를 설정할 시 첫번째부터 적용되며 표시할 수 없을 시 다음 글꼴이 적용되는 방식이다. ​ font-family: "폰트명", 폰트명 ​ - 굵기(font-weight) : 텍스트 굵기를 조절할때 사용한다. 범위는 0~900 이며 일반적으로는 400, bold는 700을 의미한다. font-weight: 숫자 or bold ​​ - 크기(font-size) : font의 기본 웹페이지 표시 크기는 16px이다. ​ * 절대적 ..
사과 주문 웹페이지 만들기 - accent클래스에 hover를 붙여 마우스를 오버할 시 글자 크기와 색이 변경되게 설정했다. - text-align:center을 사용하여 글자가 중앙에 올 수 있게 설정했다. - box-sizing: border-box를 사용하여 padding값을 주어도 가로너비 650px을 유지하게 설정했다.

티스토리툴바