천천히 차근차근

* text-align : center(left, right) 1. 자기 자신한테 text-align을 주면 자신이 움직이는게 아니라 자기가 가지고 있는 텍스트를 움직인다. 2. 그리고 자식 엘리먼트가 가지고 있는 텍스트를 부모 엘리먼트가 text-align을 주고 움직일 수도 있다. 1. 위와 같이 자식 엘리먼트에 너비와 높이를 주고 색을 입히면 요소에 크기가 정해져서 텍스트가 움직일 수 있는 반경이 제한된다. 텍스트가 움직이지 않는게 아니라 자식 엘리먼트 크기 안에서 배치가 되는 것이다. 2. 자식엘리먼트를 이동시키기 위해서는 2가지 방법이 있다. (1). 자식 엘리먼트인 div를 display:inline-block; 으로 하면 된다. 그러나 문제가 될 수 있는 점 발생. => 자식 엘리먼트가 di..

* display 속성 정리 * 태그 Class명이 여러개인 경우 CSS에는 .클래스명.클래스명으로 붙여서 사용해야 한다. (자식이 아니므로 꺽새 X, 띄어서 .클래스명 X) * display:inline-block -> 너비를 최소화 -> 너비를 주지 않으면 최소화해서 보이지 않는다. 글자를 입력하면 최소한으로 줄어서 글자에 맞게 background-color가 먹는다. * nav 태그 정의 및 특징 : 링크를 감쌀 때 사용하며, 메뉴, 목차 등을 사용할 때 감싼다. * display:flex, display:inline-block TEST 결과 ! 1. 부모한테 display:flex를 주고 부모한테 flex 지시를 해야 자식들이 요소로써 지시에 따라 움직인다. 반응한다. -> 자기자신한테 flex를..

절대 경로 : https:// ~~~ 와 같이 절대로 변경될 수 없는 경로. 상대 경로 : 본인의 위치를 기준으로 경로를 지정하는. [ test 결과 ] ../ 상위 폴더의 데이터(test file 형식 :. css)를 잘 불러왔음(연결 완료) 이런 식으로 html과 css를 연결했음. css를 필요로 하는 다른 파일들도 상위로 2번 이동하는 동일한 경로에 css를 만들어서 혼용함... 일단 내가 의도했던 위치가 아녔어서 운이 좋지 않았으면 또 멘붕이 왔을 것임. css를 활용하기 위해 html의 좋은 위치?선정이 필요할 것 같음. 구글링 결과 ./ 하위 폴더 이동이라고 검색되었으나 나는... 적용되지 않음..... ㅠㅠ..... 대체 왜... 그리고 다른 폴더에 저장되어 있는 html을 사용하기 위하여..

h 시리즈 태그에는 기본적인 margin이 들어있다. 노멀라이즈를 통해서 그걸 제거하고 사용해야 한다. margin을 0으로 노멀라이즈한 결과.

overflow-x:auto; 필요에 따라 가로 스크롤바 생성 (text 길이가 width를 벗어나지 않으면 스크롤바는 생기지 않는다.) overflow-x:scroll; text길이가 짧아도 무조건 스크롤바 생성. overflow-x:hidden; 넘쳐나는 내용 무조건 숨김. text-overflow:ellipsis; 넘친 텍스트 ...으로 처리. *조건 : 먼저 텍스트 숨김을 해야 한다. (overflow-x:hidden; )

white-space:nowrap; text 줄바꿈 금지. 한 줄에 많은 텍스트를 담는다.

position:absolute 상태에서 z-index: 숫자가 가장 큰 검색어가 맨 위에 위치한다. 숫자가 가장 작은 검색어는 제일 아래 깔리게 된다. position:absolute 상태에서 transform:translateX(-100%) translateY(-100%)하면 검색어의 결과가 자동으로 이동?하게 된다.

http://photoyaski.blogspot.com/2017/05/color-names.html

메뉴 예시 Home Tutorial Articles Inspiration HTML ↑ body, h2 { margin:0; background-color:pink; } a { color:inherit; text-decoration:none; font-weight:bold; font-size:1.2rem; } body > article > img:first-child { display:block; margin:auto; padding-top:70px; width:940px; } article { text-align:center; } article > img { margin:8px; width:300px; } nav { text-align:center; } nav > section { background-c..

1. text-align 2. font-size 3. font-weight 4. letter-spacing 5. font-family

block, inline-block 실험 결과 1. inline-block을 입력하면 background가 text 길이에 맞춰서 채워진다. 2. width 가로를 함께 입력하면 background가 입력한 가로 크기에 맞춰 채워진다. 3. 본인이 display:inline-block을 입력하고, 자식도 display:inline-block을 입력해야 자식이 본인의 옆, 가로로 이동하게 된다. 본인이 입력하지 않고, 자식도 입력하지 않으면 기본 세로로 보여지게 된다.

- f : 프레임 (아이폰 SE 선택) - r : rectangle 동그라미 : 살짝 둥글게 조절 가능 (직사각형, 삼각형, 원 모두 가능) - ctrl + shift + ? --> showHelp(단축키 설명) - arrange menu - art + a : 좌측 이동 - art + d : 우측 이동 - art + v : 수직 정렬(가운데로, 방향은 no) - art + h : 가로 정렬 열에서 가운데 정렬 - art + w : 맨 위로 이동 - 간격 확인(픽셀) - art + 마우스 키 - 색 변경(text 포함) - fill - stroke : 글자 외곽 라인 - bold : 두껍게?? - Drop Shadow : 그림자 - 그림자가 많아질 수록 더 선명해진다. -..