개발자연습노트

Flexbox 레이아웃 사용법설명하다  설명하다 .flex-container { display : flex;}.box { width : 100px; height : 100px; background : grey; margin : 5px;}그냥 박스들을 감싸는 부모 요소에게 display : flex를 사용하면 됩니다. 그럼 박스들이 기본적으로 가로정렬로 배치됩니다. (참고) 인터넷 익스플로러 11 이상에서 사용가능한 속성입니다.11미만에선 flex 그런거 없다고 에러납니다.     Flexbox 세부속성 사용하기 설명하다 .flex-container { display : flex; justify-content : center; /* 좌우정렬 */ align-items : cente..

폰트 패밀리 설정법 body { font-family : 'gulim', 'gothic'}- 버그없이 사용하려면 폰트의 영문명을 사용하셔야합니다.- 폰트명에 띄어쓰기가 있을 수 있으니 따옴표 안에 담는게 좋습니다.- 폰트명을 콤마로 여러개 쓰면 제일 왼쪽에 있는 폰트부터 적용합니다. 실패하면 뒤에 있는 폰트들을 차례로 적용합니다.- 웹사이트 이용자의 컴퓨터에 설치가 된 폰트들을 적용할 수 있습니다.     사용자의 컴퓨터에 설치되지 않은 폰트를 사이트에서 이용하려면 설명하다 @font-face { font-family : '이쁜폰트'; src : url(nanumsquare.ttf)}CSS파일 최상단에 @font-face 라는 명령어를 넣고,url() 안에 적용할 폰트의 경로와 이름을 적어줍시다.저..

상태에 따라서 스타일을 줄 수 있는 Pseudo-class 셀렉터설명하다 .btn:hover { background : chocolate; /*마우스를 올려놓을 때*/}.btn:focus { background : red; /*클릭 후 계속 포커스 상태일 때*/}.btn:active { background : brown; /*클릭 중일 때*/}pseudo-class 셀렉터를 붙이시면 여러 상태에 따른 스타일을 지정해줄 수 있습니다.hover, focus, active 스타일 넣을 때 순서는 꼭 이렇게 선언해야 잘 동작합니다.1. hover2. focus3. active입니다. hofa로 외우면 잘외워지겠군요 이거 말고도 수많은 pseudo-class가 있기 때문에 필요하면 찾아쓰도록 합시다.    ..