개발자연습노트

opacity 속성 .box { opacity : 0}현재 HTML 요소의 투명도를 조절할 수 있습니다.0부터 1까지의 실수를 입력할 수 있습니다.0.5 이러면 반투명해짐       transition 속성 설명하다 .box { opacity : 0; transition : all 1s;}transition을 부여하면여기에 적용된 CSS가 변할 때 서서히 변경해줍니다. all은 모든 스타일이 변할 때 서서히 변경하라는 뜻이고 (all 대신 opacity 이렇게 하나만 줄 수도 있음)1s 이건 1초에 걸쳐서 서서히 변경해달라는 뜻입니다.   transition 세부 속성 살펴보기  설명하다 .box { transition-delay: 1s; /* 시작 전 딜레이 */ transition-durat..

Font Awesome 다운받아 첨부하기  Font Awesome 홈페이지의 다운로드 메뉴에서 다운받아 압축을 풀면 여러개의 폴더가 나오는데, 이 중에 CSS, Webfonts 두개의 폴더를 여러분 작업폴더에 복붙하시면 됩니다. 그 후에 CSS 폴더 내의 all.css 라는 파일을 하나만 head 태그 안에 딱 첨부해주시면 설치 끝입니다. 나머지 잔챙이 CSS 파일은 다 삭제하셔도 됩니다.  link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">    Font Awesome CDN으로 첨부하기  CSS파일을 호스팅해주는 고마운 사이트들이 있습니다.이 사이트가 제공하는 all...

크롬 개발자 도구를 열면 버그 수정이 편해집니다.    브라우저에서 우클릭 - 검사를 누르시면 이렇게 HTML과 CSS를 한눈에 볼 수 있습니다. 혹은 F12 눌러서 개발자도구를 미리 열고 (맥은 alt + command + i)  ▲ 이렇게 생긴 버튼을 누르고 검사를 원하는 요소를 선택하면 됩니다.선택하면 우측 하단에 지금 선택한 요소에 적용된 모든 스타일을 보여줍니다.그 중에 어떤 속성을 만져야 수정이되는지 직접 조작해보며 확인가능합니다.   1. 여러 개의 중복 스타일이 있을 경우 가장 우선 적용되는것만 보여주고나머지 적용안되는 것들은 취소선 처리해줍니다. 2. html에 적용되는 여러개의 class가 있으면 전부 보여주는데 가장 위에 있을 수록 class의 우선순위가 높습니다. 3. 저기서 직접 ..

.box { width : 16px; /* 기본 px 단위 */ width : 1.5rem; /* html태그 혹은 기본 폰트사이즈의 1.5배 */ width : 2em; /* 내 폰트사이즈 혹은 상위요소 폰트사이즈의 2배 */ width : 50vw; /* 브라우저(viewport) 화면 폭의 50% */ width : 50vh; /* 브라우저(viewport) 화면 높이의 50% */} 예전엔 rem 단위를 가끔 썼습니다.모든 div의 사이즈, margin, padding, 버튼 사이즈 이런게기본 폰트사이즈에 비례해서 움직이게 만들고 싶을 때 rem을 사용했습니다.브라우저 폰트사이즈를 키운 채로 웹브라우징 하는 사람이 있어서 그랬습니다.하지만 요즘은 ctrl + 마우스휠업 이렇게 줌인을 해서..

설명하다  저쩌구HTML 문서의 기본 템플릿은 꼭 head와 body 태그를 포함해야합니다.head태그는 사이트 내에서 눈에는 보이지 않는 중요한 정보들이 들어갈 수 있는데head태그 내에서 쓸 수 있는 중요한 태그들을 몇개 나열해보겠습니다.    1. 각종 CSS 파일들  CSS 파일들을 첨부할 때 링크태그를 집어넣을 수 있습니다.위 경로는 현 HTML 파일과 같은 위치에 있는 css폴더 안에 있는 main.css 파일을 첨부하라고 되어있네요.1. css/main.css2. /css/main.css참고로 위 두개의 경로는 다른 경로입니다.1번은 현재 HTML파일과 같은 경로에 있는 css라는 폴더 내의 main.css 파일을 의미하고2번은 현재 사이트의 메인경로 (codingapple.com)부터 시..

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() 안에 적용할 폰트의 경로와 이름을 적어줍시다.저..