분류 전체보기(130)
-
html, css 종합 예제 클론코딩 실습
* 코딩 순서 1. 알마인드로 구조 먼저 구성 2. html 마크업 3. common css 작성 4. style css 작성 1. 구조 작성 2. html 메인메뉴 바로가기 본문 바로가기 * float의 부모요소 찾아줄 때, css에서 일일히 쓰는 것이 아니라 html 에 clearFix로 클래스 주기 3. common css *, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd { margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; color: #333; } body { font-family: , sans-serif; font-size: 14px; font-weight: 40..
2020.12.04 -
css: position, float, 알마인드 이용한 돔트리 만들기, 실습
* 부모 영역에 사이즈를 주고 자식에게 퍼센트 적용 (for 반응형) * 보통 검색창 만들때 placeholder 보다는 label positioning * nav, container 무조건 id * line-height : 행간 지정 및 정렬 * vertical-align : 형제 요소와의 상대적 (행간) 정렬 알마인드 : 돔트리 작성 https://www.altools.co.kr/Download/ALMind.aspx 알툴즈 - 알마인드 알마인드는 마인드맵® 이론을 구현한 프로그램으로, 알마인드만의 독창적인 인터페이스인 Drawing Interface, 작업 정보 설정, 토픽 추가 설명 기능, 다른 파일 형식과의 호환성 지원 등을 통해 개인 www.altools.co.kr position :fixed ..
2020.12.02 -
css: 속성선택자, 상태 선택자, position, z-index, 실습(클론코딩)
속성선택자 선택자[속성] : 속성을 가지고 있는요소를 찾아라 선택자[속성="내용"] : 속성의 값으로 내용인요소를 찾아라 선택자[속성^="내용"] : 속성의 값으로 내용으로 시작하는 요소를 찾아라 선택자[속성$="내용"] : 속성의 값으로 내용으로 끝나는 요소를 찾아라 선택자[속성~="내용"] : 속성의 값으로 내용이 포함된 요소를 찾아라(찾는 내용물이 독립된 단어일때) 선택자[속성*="내용"] : 속성의 값으로 내용이 포함된 요소를 찾아라 * 선택자[속성!="내용"] : 속성의 값으로 내용이 포함되지 않는 요소를 찾아라 jQuery 상태선택자 #hobby:checked + label{ font-size:50px; color:green; } input[type="radio"]:checked +label{..
2020.12.01 -
청년특별구직지원금 받았습니다 :)
여러분 안녕하세요 티엔입니다! 오늘 드디어 청년특별구직지원금이 입금되어서 이렇게 포스팅을 하게 되었어요. 사실 이거 받으려고 취성패한 게 없지 않아 큰 이유였다는... ;_; 아시겠지만 저는 10월초에 취성패 신청 등록을 했어요. 보시면 아시겠지만 저는 3순위에 해당했고, 대부분 받을 거라 생각은 하면서도 마음 한편으론 혹시 못받으면 어쩌지 생각했지요. 11월 말에 지급된다는 공고내용 때문에 언제 나오려나 기다리고 있었는데요- 지난 목요일 26일에 혹시나 싶어 공식 홈페이지를 들어가서 확인했더니 글쎄, 선정이라고 딱 떠있더라구요!!! 그제서야 안심했죠 ㅎㅎㅎ 그때가 이미 목요일 6시가 넘은 시각이라 금요일인 27일에 들어오겠거니 했는데 감감 무소식... 주말 내내 까먹고 있다가 오늘 친구랑 얘기하면서 은..
2020.11.30 -
CSS: box model, border-radius, margin, padding, 가상요소선택자, 순서선택자, 구조선택자, 이후선택자, display, overflow
box model (블럭 요소에 줄 수 있는 속성) width height border (inner-stroke, 크기가 변함) outline (outer-stroke) border-radius #1 : 전체 #1 #2 : (왼위,오아) (오위,왼아) #1 #2 #3 : (왼위) (오위왼아) (오아) #1 #2 #3 #4 : (왼위) (오위) (오아) (왼아) x/y margin : 블럭요소 밖 여백 #1 : 전체 #1 #2 : 위아 왼오 #1 #2 #3 : 위 왼오 아래 #1 #2 #3 #4 : 위 오 아 왼 margin-top margin-right margin-bottom margin-left * 마진겹침현상 : 위아래 마진값이 겹치면 큰값 하나만 적용 * margin:0 auto : 좌우 가운데 ..
2020.11.30 -
css: size, text, font, list, cursor, background, 선택자, 가상선택자pseudo
size vw: viewport width 보는 기기의 너비가 기준 vh: viewport height 보는 기기의 높이가 기준 vmin: vw와 vh 중 작은 값 기준 vmax: vw와 vh 중 큰 값 기준 text font-size: px,em,%,vw,vh,vmin,vmax text-align: left,right,center,justify(양쪽맞춤) font-weight : bold,bolder,lighter,100~900 , 기본 400 font-style: italic(글자 기울기), normal(기본상태) letter-spacing line-height: 줄간격, 단위를 생략하면 배수 단위가 된다. text-decoration: underline, (line-through)중간줄,(overl..
2020.11.27