HTML, CSS, javascript (36) 썸네일형 리스트형 포트폴리오(싱글페이지) 제작 실습 - 코드 입력 - 웹 페이지 화면 - section 태그로 내용별로 구분하여 만들고 유튜브는 iframe 태그를 이용하여 붙여 넣었고, shadow 속성, float 속성, position 속성 등을 이용하여 배치를 했다. CSS (9) shadow 속성 - 태그에 그림자를 부여해주는 속성 - 글자에 그림자를 부여하고 싶을 경우 text-shadow 속성을 사용하고 박스에 부여하고 싶을 경우에는 box-shadow를 사용한다. - 속성 값은 오른쪽 아래 흐림정도 색상 순으로 입력한다. gradient 속성 - 2가지 이상의 색상을 혼합해서 사용하고 싶을 때 사용하며, 방향 설정도 가능하다. - 모양과 방향을 설정하고, 원하는 퍼센트 마다 색을 정해줄 수 있다. - 처음에 설정하기는 힘들기 때문에 쉽게 설정할 수 있는 사이트를 이용하는것이 도움이 된다. 아래 링크를 들어가면 쉽게 설정할 수 있다. https://www.colorzilla.com/gradient-editor/ CSS (8) overflow 속성 - position 속성이 absolute인 자식요소들이 부모요소의 크기를 넘어선 위치에 있게되면 위의 그림처럼 넘치게 된다. 만약, 넘치는 요소들을 안보이게 하고싶다면 overflow 속성을 사용하면 된다. - 위의 그림처럼 overflow 속성에 hidden 값을 주게 되면 넘치는 부분이 보이지 않게 된다. - 넘치는 부분을 보여줘야 하는 상황이라면 overflow 속성에 scroll 값을 주어 위의 그림처럼 스크롤 바가 생기게해서 스크롤을 하면 내용들을 볼 수 있게 된다. 이때, overflow-x, overflow-y 속성을 사용하면 x축 또는 y축에만 스크롤이 생성되게도 할 수 있다. float 속성 - 요소들을 왼쪽 또는 오른쪽으로 배치하려고 할 때 사용한다. 구분을 위해.. 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 형식처럼 보이.. 이전 1 2 3 4 5 다음
