내직업은 IT종사자/HTML|CSS (10) 썸네일형 리스트형 [css] display: flex 완벽 정리, flex container속성, flex item속성 2편 목차 flex-basis flex-shrink flex-grow flex align-self order Flex item에 적용되는 속성들 1. flex-basis (기본값 auto) flex-basis: auto (default) flex-basis: 0 / 50% / 300px/ 10rem / content 등이 올 수 있습니다. flex-basis는 아이템의 기본 크기를 설정하는 것입니다. width와 heightd값과 별반 차이가 없어보이지만 flex-direction(flex container에 적용하는 속성) 값에 따라 축이 바뀝니다. flex-direction:row로 설정하면 flex-basis는 가로 값이 되고 flex-direction:column으로 설정하면 flex-basis는 .. [css] display: flex 완벽 정리, flex container속성, flex item속성 1편 목차 display: flex의 브라우저별 지원현황 display: flex의 html 코드구조 flex의 container(껍데기)에 적용하는 속성들 IE에서 호환안되요... 등 여러 이유로 쓰기를 망설여왔던 display: flex, float과 inline-block을 대신해서 사용하곤 했었습니다. 근데 float은 clear: left,right,both로 해제를 해줘야 다음 요소에 영향이 안가구, inline-block으로 요소를 나열하면 의도하지 않은 여백이 생겨서 부모 요소에 다른처리를 해줘야하는 불편한점이 있엇습니다. 이제는 display: flex와 grid를 적절하게 사용하는 것이 여러모로 장점이 많더라구요 알고보면 스타일 적용하는것도 더 간편합니다! 1. display: flex 브라.. [css] css selector(선택자) 종류, css 성능에 미치는 영향 목차 selector(선택자)종류 selector가 css 성능에 미치는 영향 CSS selector(선택자)의 종류 , css 성능에 미치는 영향 1. selector(선택자) 종류 일단, Steve Souder 의 Even Faster Websites에서 인용하는 css선택자 순위는 아래와 같습니다. id - 공통으로 사용불가 한페이지당 1개가 존재해야 합니다. 사용 예: #selector class - 공통으로 사용 가능하며 스타일이 같은경우 같은 클래스로 한번에 스타일링 할 수 있습니다. 사용 예: .selector tag 태그선택자 - 등등 태그 이름을 선택자로 쓸 수 있습니다. 사용 예: p {...} strong {...} sibling 인접선택자 - 특정 태그의 [바로 다음] 형제 요소를 .. [css] css 방법론(oocss, bem, smacss) 목차 방법론 1. OOCSS 방법론 2. BEM 방법론 3. SMACSS CSS 방법론 1. OOCSS (Object Oriented CSS) OOCSS(Object Oriented CSS)는 CSS를 모듈(module)방식으로 작성하여 중복을 줄이는 방식의 방법론 입니다. OOCSS는 가장 많이 사용되는 방법론으로 구조와 스타일을 분리하여 작성합니다. 중복되는 디자인 요소를 따로 빼내어 작성하기 때문에 반복적으로 사용가능합니다. 또한 코드의 재사용성이 높아져 적은 코드량으로 최적의 성능을 보입니다. 장점: 공통된 부분을 찾아 어디서나 재활용 할 수 있다는 점 단점: 다중 클래스 사용으로 인해 코드의 가독성이 떨어질 수 있습니다. Instagram Facebook Instagram Facebook .bt.. [html] <head>태그 <script> async, defer 차이점, 어떻게 사용해야 할까요? normal, async, defer의 차이점 목차 브라우저는 HTML을 읽다가 #1과 같이 태그를 만나면 스크립트를 먼저 실행하고 DOM 생성을 멈춥니다. 또 #2와 같은 경우도 외부 스크립트를 다운받고 실행한 후에야 DOM생성을 하기 시작합니다. 이런 브라우저 동작방식은 스크립트에서 스크립트 아래에 있는 DOM요소에 접근을 할 수 없습니다. 페이지 위쪽에 용량이 큰 스크립트가 있는경우 스크립트 다운 및 실행할때까지 아래쪽 페이지를 볼 수 없습니다. 스크립트 앞 콘텐츠 스크립트 뒤 콘텐츠 위의 문제를 해결하기 위해서 를 화면 요소() 안의 맨 아래에 위치 시켜놓는 방법도 있습니다. ...화면 요소들 이러한 방법은 간단하고 가벼운 페이지들은 문제가 되진 않지만 HTML문서 자체가 아주 큰 경우, 브라우저.. [html] a href="#" , javascript: void(0), javascript: ; 차이점, 무엇을 써야할까요? 1. a href 의 값 종류들 ... (a target속성 관련 >> https://joyhong-91.tistory.com/entry/html-a-%ED%83%9C%EA%B7%B8-targetblank-%EC%99%80-targetblank-%EC%B0%A8%EC%9D%B4) [html] a 태그 target="blank" 와 target="_blank" 차이 목차 target 속성의 역할 >> 바로가기 target="_blank" >> 바로가기 taget="blank" >> 바로가기 1. target 속성의 역할 두 가지 다 누르면 새 창으로 이동하는 공통점이 있습니다. - target="blank" - target="_blank" 두가 joyhong-91.tistory.com 위의 {값}에 들어갈.. [html] a 태그 target="blank" 와 target="_blank" 차이 목차 target 속성의 역할 >> 바로가기 target="_blank" >> 바로가기 taget="blank" >> 바로가기 1. target 속성의 역할 두 가지 다 누르면 새 창으로 이동하는 공통점이 있습니다. - target="blank" - target="_blank" 두가지가 있습니다. 예제 코드) 티스토리 개인블로그 티스토리 개인블로그 티스토리 메인페이지 2. target="_blank" 누르면 새 창으로 이동합니다. "blank"와 차이점은 누를 때 마다 새창으로 열린다는 것입니다. 3. target="blank" 누르면 새창으로 이동하지만 초기에 열렸던 새창으로 계속 열립니다. 예를 들어 눌렀을때 target="_blank"는 누를때마다 새로운 탭(새로운 창)이 열리고 눌르는 횟수만큼 .. [html] display:none, visibility: hidden의 차이점 목차 display: none, visibility: none의 공통점 display: none, visibility: none의 차이점 영역차이점 스크린리더기의 인식차이점 1. display: none, visibility: none의 공통점 두 속성 모두 화면상에서 콘텐츠 영역을 숨기는 역할을 합니다. 2. display: none, visibility: none의 차이점 2-1. 영역 차이점 두가지의 가장 큰 차이점은 영역이 인식이 되냐, 안되냐의 차이입니다. display: none을 하면? 해당 콘텐츠 영역이 안보이게 되면서 영역 또한 사라지게 됩니다. visibility: hidden 을 하면? 해당 콘텐츠 영역이 안보이게 되는 것은 동일하지만 콘텐츠가 가지고 있던 영역은 그대로 유지됩니다... 이전 1 2 다음
