헷갈리는 CSS Flex 속성 정리(grow, shrink, basis, margin auto 등)
1. 상위 요소(Flex Container)에 적용하는 속성display: flex vs display: inline-flexdisplay: flex는 block 요소처럼 자리를 차지함. 따라서 부모 너비 전체를 차지한다:display: inline-flex는 이름 그대로 inline 요소처럼 자리를 차지함. 따라서 컨텐츠 너비만큼만 차지한다:거의 대부분의 상황에서 flex를 사용하지만, 버튼 그룹, 태그 그룹, 배지 등에서는 inline-flex를 사용하는 것이 더 적절할 수 있다.정리하자면 독립적인 블록이 필요할 땐 flex, 다른 요소와 같은 줄에 있어야 하면 inline-flex를 사용하는 것이 좋다. 2. 하위 요소(Flex Item)에 적용하는 속성flex(grow, shrink, basis)..
2025. 11. 4. 19:01
css grid
https://youtu.be/nxi1EXmPHRs 위 강의를 보고 그리드 복습하기 1. 레이아웃 flex는 아이템들을 1차원적으로 배치할 수 있게 도와준다. (wrap 속성을 사용하여 줄 바꿈을 해줄 수 있긴 하다.) grid는 row - cloumn 2차원적으로 배치할 수 있게 도와준다. 필요에 따라 둘을 적절히 사용하는 것이 최고! 2. grid 개념 정리 부모 컨테이너에 display: grid 속성을 주면 컨테이너에 포함된 자식 아이템들은 grid cell이 됨 이때 grid와 grid-cell 각각에 어떤 속성을 지정할 수 있는지 알아보자 grid에는 전체적인 template를 지정할 수 있는데, grid-template-columns: 가로축으로 총 몇 개의 column이 들어갈 수 있는지,..
2022. 9. 15. 00:25
vscode live sass compiler
그동안은 scss를 node 기반으로 세팅해서 사용하였다. 이번에는 조금 더 간단하게 vscode의 Live Sass Compiler 플러그인으로 scss 파일을 컴파일해보려고 한다. 다음 게시글을 참고하였다. https://ossam5.tistory.com/90 [VS CODE] Live Sass Compiler 1. 설치하기 - SASS 컴파일을 자동으로 해주는 플러그인 - [SASS Lint]도 같이 설치하면 SASS문법을 쉽게 코딩할 수 있다. 2. [Watch SASS] - [Live Sass Compiler]를 설치하면 하단 상태표시줄에 [Watch Sass].. ossam5.tistory.com scss, css 디렉토리를 각각 생성해서 각 디렉토리에서 파일을 생성하여 관리하려고 한다. 이때..
2021. 9. 18. 11:37prettier html 적용 안됨 문제
"[html]": { "editor.defaultFormatter": "vscode.html-language-features" } settings.json에 위 코드 추가
2021. 7. 13. 10:45
[웹접근성] aria-label, aria-hidden, sr-only, visually hidden
웹 접근성 관련 정리 1. aria-label 스크린리더에게 텍스트로 전달할 수 있는 속성 2. aria-hidden 딱히 의미있지 않아서 스크린리더에도 보이지 않게 가리기 3. sr-only 혹은 visually hidden 위 클래스이름을 사용해서 화면에는 보이지 않지만, 브라우저나 스크린리더에게 텍스트로 의미를 전달할 수 있다. 보통 sr-only 라고도 많이 사용하고, 최근 부트스트랩에서 visually hidden으로 사용하고 있는데 명시적인 이름이라고 생각되어 이것도 사용하려고 함. 다음과 같은 css 속성을 사용하여 화면에는 숨긴다. .sr-only { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden;..
2021. 7. 10. 03:17css 대괄호
대괄호([])로 지정한 속성을 가진 요소를 찾아서 스타일을 적용시킨다. 속성값도 함께 지정하면 요소들중 속성값까지 일치하거나, 포함하는 경우에만 적용하게 할 수 있다. [attribute-name=”value”]: 속성값이 “value”와 정확히 일치 [attribute-name|=”value”]: 속성값이 “value”와 일치하거나 “value-“ 로 시작 [attribute-name~=”value”]: 속성값이 “value”를 포함. 단어 기준 [attribute-name*=”value”]: 속성값이 “value”를 포함. 문자열 기준 [attribute-name^=”value”]: 속성값이 “value”로 시작. 문자열 기준 [attribute-name$=”value”]: 속성값이 “value”로 ..
2021. 5. 18. 02:26
네이버 HTML & CSS
- console 창에서 document.head.parentNode.removeChild(document.head); 해서 헤드 없애면 css 사라지니까 네이버의 순수 html 뼈대를 확인할 수 있다. - 상단 탭 아이콘 favicon href 에서 이미지 원본 저장 해 올 수 있다. 원하는 엘리먼트를 클릭하면 그 엘리먼트 소스를 보고 sources 에서 해당 소스 주소 찾아가면 이미지 파일 저장할 수 있음 - heading 해당 페이지의 중요한 키워드 크롬 익스텐션 headingsmap 다운 받으면 보고 싶은 페이지가 핵심으로 여기는 키워드를 알 수 있음 -fieldset, legend 태그 레전드는 범례. -img 태그엔 alt 스크린리더..
2020. 11. 6. 06:40
드림코딩 - html & css & vscode
프론트엔드 개발자 입문편: HTML, CSS, Javascript 웹페이지를 볼 때 박스 단위로 나눠서 보는 것이 중요함.. article은 반복되고 재사용이 가능한 요소들.. +Tip) ReadMe 작성 프리뷰 팁 ctrl shifr p > markdown preview 협업하다가 테스트가 필요할 때 웹에서 간단하게 구현해볼 수 있는 사이트 +) html 작성 팁 1. div>ul+ol 2. div>ul>li^ol 3. 그룹화 4. 텍스트 넣기 p{hellp} hello
2020. 11. 4. 04:38github
1) 서버와 클라이언트 http://info.cern.ch Web Browser Web Server 클라이언트 - > 서버 (request) (response) 수학은 이해하는 게 아니라, 익숙해지는 것. 익숙해지려는 수많은 방법 중 하나가 이해일 뿐이다. 2) github 내가 만든 html을 홈페이지로 만들기 -[create repository] -Initialize this repository with a README 이 문구 꼭 체크! -upload files로 내 파일 끌어오기. -setting에서 github pages - source - master branch -Your site is ready to be published at (링크) 하면서 링크가 뜰 것이다. 그게 내가 만든 html을..
2020. 6. 2. 13:58시작
시작. 내 인터넷 필기 노트처럼 사용할 예정. 다시 복습하기 좋게 정리하고.
2020. 5. 29. 00:09