설계의 품격

참고 사이트 float : left ; (요소들을 왼쪽으로 정리한다) float : right ; (요소들을 오른쪽으로 정리한다) float 속성을 준 부모 태그에는 무조건 아래의 속성을 주어 레이아웃이 틀어지지 않도록 한다. 기본적으로 row 라는 클래스를 만들어 넣어줌 .row::after{ clear:both; display:block; content:""; }

font-size: 24px ; font-weight: bolder ; 폰트웨이트는 기본 = normal, 100~900, bold, bolder font-family: 'Nanum Pen Script', cursive; 구글 폰트 에서 선택후 링크 걸고 변경 text-shadow: 10px 10px 10px black ;

transition 속성 - css 가 변경될때 자연스러운 애니메이션 구현 사용방법 : transition : 1s ; 변경되는 시간 설정 ex) .box {transition : 1s ;}

마우스 오버 속성 - 마우스를 올렸을때 css 변경되는것. 사용방법 : css 에서 클래스 명뒤에 :hover 라고 입력 ex) .box:hover {width: 300px;} See the Pen BapNLBe by goodmean (@goodmean) on CodePen.

background : 배경변경요소로 축약형태이다. background-color : 배경변경요소 중 배경 색상 변경요소 color : 내부 텍스트 색상 변경 width : 너비 크기요소 (가로크기) px/% 사용가능 height : 높이 크기요소 (세로크기) px/% 사용가능 padding : 내부 여백 요소 (배경 포함 o) px / % 사용가능 사용 방법 1 - padding: 0(상하좌우) ; 사용 방법 2 - padding: 10px(상하) 10px(좌우) ; 사용 방법 3 - padding-top: 10px ; 상단 여백 10px 상하좌우 다 설정 가능 margin: 외부 여백 요소 (배경 포함 x) px / % 사용가능 사용 방법 1 - margin: 0(상하좌우) ; 사용 방법 2 - ma..

ID / CLASS 의 이름은 숫자로 지을 수 없다. ID / CLASS 의 이름은 "-" 로 시작할수 없다. ID / CLASS 의 이름은 직관적으로 지어야 한다. ex) 상단의 메뉴를 만들때는 top~~ 로 짓는다. ID / CLASS 의 이름이 2가지이상의 단어를 합칠경우는 언더바(_) , 대시(-) 낙타표기법(카멜케이스) 방식으로 만든다. ex) 상단 메뉴를 뜻하는 top nav 를 지을때 방법 1 . top-nav 대시 2 . top_nav 언더바 3 . topNav 낙타표기법

스타일 직접 입력하는 방식처럼 태그내에 class = "class 이름" 으로 적용한다. ex) Class 적용 ex) Class 적용 ex) Class 적용 한 요소에 여러가지 Class 를 넣을 수 있다. ex) 불가능한 방법 css 나 js 에서 class를 호출할 때는 .class이름 으로 호출한다. ex) ID 적용

"id2"> ID 적용 ex) ID 적용 문서에서 같은 아이디를 가진 요소는 없어야 한다. 한 요소에 여러가지 id 를 넣을 수 없다. ex) 불가능한 방법 css 나 js 에서 id를 호출할 때는 #ID이름 으로 호출한다. ex) ID 적용

h 태그 텍스트를 작성하는 태그 중 제목을 나타내는 태그로 h1 ~ h6 까지 있으며 볼드체와 번호마다의 글자 크기가 다르다. p 태그 텍스트를 작성하는 태그 중 단락을 나타내는 태그로 위아래의 여백과 줄바꿈이 되어있는 태그이다. span 태그 텍스트를 작성하는 태그 중 아무런 속성이 없는 태그이다. section 태그 구역을 나타내는 시멘틱 태그 nav 태그 메뉴를 나타내는 시멘틱 태그 article 태그 (인터넷)기사 같은 것을 나타내는 시멘틱 태그 footer 태그 html 상에 맨 아래에 있는 시멘틱 태그로 홈페이지 정보가 들어있다. header 태그 홈페이지 가장 위에있는 시멘틱 태그다. div 태그 웹페이지의 전체적인 레이아웃 및 구분 등에 사용되는 용도가 따로 정해져있지 않은 넌시멘틱 태그 ..

// 1년이 지났습니다. 자기소개의 나이를 31살로 바꿔주세요. #include int main(void) { printf("안녕하세요 저는 %d살 홍길동입니다.\n", 31); printf("안녕하세요 저는 %d살 홍길동입니다.\n", 31); printf("안녕하세요 저는 %d살 홍길동입니다.\n", 31); printf("안녕하세요 저는 %d살 홍길동입니다.\n", 31); printf("안녕하세요 저는 %d살 홍길동입니다.\n", 31); printf("안녕하세요 저는 %d살 홍길동입니다.\n", 31); printf("안녕하세요 저는 %d살 홍길동입니다.\n", 31); return 0; }