본문 바로가기

CSS

[CSS] display 속성(none / block / inline / inline-block) display 속성 종류1. none2. block3. inline4. inline-block1. display : nonedisplay 속성을 none으로 설정하면, 태그 자체가 보이지 않게 된다. visibility 속성을 hidden 으로 설정한 것과는 달리, 영역 자체를 차지하지 않는다.2. blockwidth는 기본적으로 화면의 100% 전부를 차지하며, width와 height 속성을 지정할 수 있다.ex) , 3. inlineblock 태그와 달리 width는 기본적으로 화면의 100% 전부를 차지하지 않으며, width와 height 속성을 지정할 수 없다.ex) 4. inline-blockblock과 inline의 중간 형태이다. width는 기본적으로 화면의 100% 전부를 차지하지 않.. 더보기
[CSS] Position(static / relative / absolute / fixed / sticky) Position 종류1. static2. relative3. absolute4. fixed5. sticky Position 속성은 도큐먼트(document) 에 요소를 배치하는 방법을 지정하고, top, right, bottom, left 속성들은 요소가 최종적으로 배치될 위치를 지정한다.1. staticstatic은 position 속성 기본값으로, document의 일반적인 흐름을 따라 배치된다. top, bottom, left, right, z-index 속성들은 static에서 아무런 효과를 주지 못한다.2. relativerelative은 상대적인 위치를 계산한다. top과 bottom 속성은 기본 위치로부터 수직 방향으로 얼만큼 떨어진 곳에 위치할 것인가를 설정하고, left와 right 속성.. 더보기
[풀스택 부트캠프] 섹션 6. jQuery 사용하기 1. jQuery 시작하기1) jQuery란?- DOM 조작을 위해서 우리가 실제로 다뤄볼 라이브러리는 jQuery라는 라이브러리다.- jQuery는 부트스트랩과 같은 오픈소스 라이브러리 중의 하나이다.- jQuery는 웹페이지에 있는 내용들을 손쉽게 동적으로 조작할 수 있게 해준다. 2) DOM에 대한 이해- DOM : Document Object Model- Document : html이나 css를 Document(웹문서)라고 한다. - Object : 웹 문서의 태그 하나 하나를 Object라고 한다.- DOM이란, 이 object들을 손쉽게 조작할 수 있게 해주는 프로그래밍적 인터페이스, 프로그래밍적 수단을 말한다.- 구조화된 계층적 구조를 계층적으로 어떻게 접근하는지, 어떻게 위치나 속성을 변경.. 더보기
[풀스택 부트캠프] 섹션 4. 웹퍼블리싱 1. HTML/CSS 활용하기: 자기소개 사이트 완성하기1) 레이아웃 구성- 적절하게 섹션을 나누어 레이아웃을 구성한다.- ex) 헤더 부분 / 프로필 부분 / 취미 부분 / 갤러리 부분 2) 외부 파일에 CSS 선언하기- html 파일의 태그 안에 CSS 파일 링크를 적어준다.123456789 Colored by Color Scriptercs 3) CSS 스타일 주는 방법- div.header h3 => header라는 이름의 클래스를 가진 div 아래에 있는 h3 태그에 스타일을 주겠다는 뜻이다. 4) class로 스타일 재활용하기- 원하는 부분에 동일한 class를 추가함으로써 코딩량을 줄일 수 있다. 5) float 속성 주기- float : left => 왼쪽에 띄우겠다는 뜻이다.- float .. 더보기

티스토리툴바