천천히, 꾸준히

😺 Study/CSS, SCSS

보통 border를 주면 해당 콘텐츠의 바깥에 생성되지만, inner border를 주기 위해 box-shadow를 사용할 수 있다는 걸 알게 됐다. box-shadow: 0 0 0 3px inset; -> 왼쪽, 위쪽, 번짐, 굵기 * inset: 내부 안 쪽에 넣는다는 의미

2021. 5. 13.

😺 Study/CSS, SCSS

background 속성에 image를 넣었는데, F5를 아무리 눌러봐도 이미지가 나오지 않았다. 이유가 뭘까? 이미지를 넣는 경로는 2가지가 있다. - 절대경로 다른 서버에 있는 이미지를 불러오는 경로 a {background: url("http://image.co.kr");} - 상대경로 상대적으로 변경이 가능한 경로 폴더구조에서 현재 파일을 기준으로 상위 또는 하위 폴더 경로를 찾아서 url을 작성하는 방법이다. a {background: url(../images/main.png) no-repeat;} 작성했던 코드는 footer {background: url("images/이미지.jpg") center no-repeat;} 보통 하는 실수로 이미지 영역의 크기를 지정해주지 않는 것이 있는데, 이미..

2021. 2. 14.

😺 Study/CSS, SCSS

CSS 단위에는 절대 길이와 상대 길이가 있다. 먼저, 절대 길이 px 화면에서 고정된 크기 값 pt 표준 인쇄 단위 window에서 9pt = 12px, mac에서 9pt = 9pt이다. 실무에서는 디자이너들이 가끔 pt로 psd를 보내주는 경우가 가끔 있을 수 있는데, 편의상 같은 값으로 계산하여 작업한다고 한다. 그다음, 상대 길이 % em 선언한 해당 폰트의 대문자 M의 너비를 기준으로, 상대적인 단위이다. em과 rem의 차이 em은 부모 요소의 영향을 받고, rem은 html의 영향을 받는다. See the Pen QWKzaPW by leecorin (@leecorin) on CodePen. .wrap의 font-size: 24px이고 .section의 font-size: 36px인 것을 알 ..

2021. 1. 16.

😺 Study/HTML

edwith에서 '자바스크립트의 시작' 편을 모두 수강한 뒤, 웹 UI 강의로 넘어갔다. 비록 이미 조금 익숙해진 html과 css를 주로 다루지만 프로젝트 과제도 있기 때문에 남는 것도 있을 것 같고, 무엇보다 내가 쓰던 것만 쓰는 단계에 이르러서 다시 되짚어보고 몰랐던 걸 체크해보는 게 좋겠다고 생각했다. 처음 html과 css를 접하는 분들에게 최적의 강의가 아닐까 생각이 든다. 차근차근 천천히 알아듣기 쉽게 알려주셔서 이해가 쏙쏙-👩🏻‍💻 강의를 통해 배운 html의 기본적인 구조를 다시 정리해본다. 처음 html을 시작할 때, 그저 항상 들어가는 것이니 이전의 강사님이 넘어가셨던 기억이 난다. meta는 내용없는 빈 태그, charset(character set[캐릭터셋]:문자부호) 속성은 문자..

2021. 1. 16.

😺 Study/CSS, SCSS

크게 2가지씩 나뉜다. Container와 item, 수직축과 수평축. *flex-box를 설정하는 방법 div{display: flex;} 아이템들을 감싸는 부모요소에 "야! 너 이제 flex-box야." 라고 얘기하기. *박스의 위치와 아이템들의 방향을 바꿀 수 있다. div{ flex-direction: row; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; } row: 왼쪽부터 순서대로 브라우저에 위치 (가로방향) row-reverse: 오른쪽부터 반대순서로 브라우저에 위치 (가로방향) column: 왼쪽부터 순서대로 브라우저에 위치 (세로방향) column-reverse: 왼쪽부터 반대순서로..

2020. 9. 11.

😺 Study/CSS, SCSS

:nth-of-type(odd) :nth-of-type(even) odd는 홀수번째 요소를 선택한다. even은 짝수번째 요소를 선택한다. p:nth-of-type(1) p:nth-of-type(2n+1) p요소 중에 첫번째 요소를 선택한다. 부모 안의 p 요소 중 첫번째부터 2번째마다 선택한다. 내용 p:only-child p:only-of-type div요소의 자식인 p요소가 하나밖에 없을 때. p요소와 같은 유형의 형제가 없을 때. p:last-child p:last-of-child 부모 안에 모든 요소 중 제일 마지막 요소인 p를 선택한다. 부모 안에 모든 p요소 중 마지막 p요소를 선택한다. :empty 자식이 전혀 없는 요소에 적용하는 선택자. 요소 안에 주석이 있어도 상관이 없다. 공백이 있..

2020. 9. 9.

😺 Study/CSS, SCSS

CSS : Cascading Style Sheet html이 뼈대라면 css는 꾸며주는 역할이다. 크게 3가지로 나뉜다. 1. Author style : css를 의미 2. User style : 사용자 취향에 맞게 스타일링 3. Browser *! important는 되도록 쓰지 않도록 한다. *css reference 홈페이지를 통해 css 속성들, 브라우저 호환성 등을 확인할 수 있다. 참고: 유튜브 드림코딩엘리

2020. 9. 9.

😺 Study

// 웹에서 표준적으로 사용되는 공통적인 기술이나 규칙 // World Wide Web Consortium(W3C)에서 정의하는 공식 기준 // HTML은 접근성과 시맨틱 HTML의 가이드라인을 충족해야 함. // W3C Validator(문법검사)에서 작업한 html, css 파일 검사 가능 (통과해도 완벽한 코드 인증은 아님!) 마크업 검증 서비스 https://validator.w3.org/ The W3C Markup Validation Service Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our informa..

2020. 6. 17.