'CSS' 태그의 글 목록 (3 Page)

본문 바로가기

[D+45] CSS : box-sizing, position, flex 국비지원 D+45 - CSS : box-sizing, position, flex - CSS : box-sizing - Element의 너비와 높이를 계산하는 방법을 지정하는 속성이다. - content-box : 기본값, content 영역이 width, height의 기준이 된다. - border-box : border까지의 영역이 width, height의 기준이 된다. CSS : position - HTML문서에서 element를 배치하는 방법으로 element의 위치를 지정하는 방법을 의미한다. - static(기본값), relative, absolute, fixed, sticky • position : static - element가 문서의 일반적인 흐름에 따라 배치된다. - top, right.. 2022. 11. 23.

[D+44] Front-end 미니프로젝트 1일차 : 웹폰트 설정 및 네비게이터 설정 국비지원 D+44 Front-end 미니프로젝트 1일차 - 웹폰트 설정 및 네비게이터 설정 - 목적 스크롤을 움직일때마다 반응하는 스크롤인터렉션 사이트를 구현하기 오늘 한 일 - 웹폰트 설정 - 네비게이터 설정 파일 구성 및 내용 • index.html - 웹폰트를 설정해 초기 셋팅을 진행해주었다. - 상단에 들어간 메뉴에 대한 정보와 내용들을 넣은 후 nav와 section태그를 사용해 의미를 부여하였다. Home History Store Contact Real Apple Pro Overview Compare Buy Real Apple Pro 온전히 빠져들게 하는 빛깔 나의 건강을 채워주는 향기 깨끗한 자연의 신선함 새롭게 입가를 찾아온 매혹 진짜 사과 이야기 사과를 매일 하나씩 먹으면 의사 볼 일이 .. 2022. 11. 22.

[D+35] CSS 개념, 선택자, font-size, Box model 국비지원 D+35 - CSS 개념, 선택자, font-size, Box model - CSS 개념 - HTML의 디자인(스타일)을 꾸미기 위한 프로그래밍 언어 - HTML에서 디자인과 Element의 분리로 독립적인 디자인 요소를 제공하고, 정보의 간결성, 유지보수성을 극대화한다. - 상위태그에서 적용한 속성이 하위태그에 그대로 상속된다. (단, 모든 CSS속성이 상속되는 것은 아니다) • CSS의 적용방법 종류 - 외부 CSS : 외부파일로 작성하여 사용하며, 가장 일반적인 방식이다. - 내부 CSS : html파일 내부에 style태그를 넣어서 사용하는 방식이다. - 인라인 CSS : 태그안에 직접넣어서 사용하는 방식으로 잘 사용하지는 않는다. CSS 선택자 HTML의 Element를 선택하기 위한 .. 2022. 11. 11.

[D+35] 공간분할태그, 시멘틱태그 국비지원 D+35 - 공간분할 태그, 시멘틱 태그 - 공간분할 태크 공간분할 태그는 레이아웃을 구성하기 위해 논리적인 영역을 분할하는 태그로 크게 2가지가 있다. • Block 방식 - 페이지의 공간을 한줄 다 가지고 있는 방식 - div, h1, p, table, form 등 • Inline 방식 - 컨텐츠 영역만큼만 공간을 차지하고 있는 방식 - span, a, input 등 시멘틱 태그 - 시멘틱 태그는 의미가 있는 태그라는 뜻으로 기존에 div나 p와 같은 태그는 어떤 영역인지 알 수 없지만 시멘틱 태그를 사용할 경우 각 태그의 영역이 어떤 영역인지 파악하기 쉽다. - 시멘틱 태그를 사용했을 때의 장점은 검색엔진이 파악하기 좋기 때문에 데이터를 분석하기 쉽다. - 참고로 시멘틱 태그는 추천일뿐 필.. 2022. 11. 10.

[HTML+CSS] Do it! HTML5+CSS3 웹 표준의 정석 공부 후기 끝나지 않을 것 같은 HTML과 CSS 늪에서 드디어 벗어나게 되었다. 사실 이 책은 최근에 산 책은 아니고 예전에도 공부하려고 샀었는데 중간정도까지 공부하다가 허리 디스크가 터지는 바람에 치료받느라 녀석의 존재를 잊고 있었다. 그래서 이제서야 다시 마음을 잡고 새로운 마음으로 공부를 하기로 결심했다. 내가 이 책을 구입했었던 가장 큰 이유는 나는 내가 스스로 해냈다라는 느낌을 받아야 공부를 하기 때문에 단원이 끝날때마다 연습문제나 단원 마무리 문제가 있는 것을 찾고 있었는데 내가 찾아본 책들 중에서는 이 책이 어느정도 예제들도 있고 혼자 공부하기에 참 좋은 것 같아서 구입하게 되었다. 책에 대해 간단히 후기를 남겨보자면 세세하게 웹을 만들고 결과를 확인하는 것 까지 이미지와 함께 아주 잘 나와있어서 나.. 2020. 8. 24.

[HTML+CSS][CSS3와 애니메이션] 04 - 애니메이션 [HTML+CSS][CSS3와 애니메이션] 03 - 트랜지션 [HTML+CSS][CSS3와 애니메이션] 02 - 변형과 관련된 속성들 [HTML+CSS][CSS3와 애니메이션] 01 - 변형 [HTML+CSS][다재다능한 CSS3 선택자] 03 - 가상 클래스와 가상 요소 [HTML+CSS][다재다능한 CSS3 선택자] 02.. onelight-stay.tistory.com 트랜지션을 보다 더 부드럽고 쉽게 사용할 수 있는 애니메이션에 대해서 알아보자. CSS와 애니메이션 애니메이션은 시작 스타일과 끝 스타일을 지정하면 CSS에서 중간 스타일을 자동으로 추가해 전체적으로 부드럽게 변하는 애니메이션 효과를 만들어 낸다는 트랜지션과 비슷한 성격을 가지고 있긴 하지만, CSS 애니메이션은 시작해 끝내는 동안 .. 2020. 8. 12.

이전 1 2 3 4 5 6 ··· 14 다음

티스토리툴바