프로그래밍 공부/html,css11 [Css] - FlexBox 정리 Flex box 특징 3가지 자식 요소에는 어떤 것도 적지않아야함 부모요소에만 명시 display : flex Flexbox ( 주축과 교차측) : main axis : cross axis Justify-content : 수평(주축)으로 작용하는것으로 생각할수잇다 : 주축에서 움직인다. Align-items : 교차축에 적용됨 ( 기본적으로는 수직 ) : 교차 축에서 적용되어 움직임 : 교차축에 있는 아이템들을 움직이게 한다 . : Justify-content 에 비해 많은 옵션이 없다. ▶둘다 축 변경 가능 Vh (view point height) : screen 이라고 생각하면 됨 !! 더 쉽게 사용하기 위해 flexbox 를 적용하고 싶으면 자식요소가 아니라 부모요소에게 알려주면 된다. !!! 여기.. 2021. 10. 31. [html,css] - display 속성, box 의 특징 CSS cascading : 위에서 아래로 흐르는 브라우저가 코드를 읽을대 위에서 아래로 흐른다 만약 같은 상속자를 두고 스타일을 지정하면 마지막이 지정한 스타일이 적용 css를 추가하는 방법 같은 html 파일에 추가 : inline css태그에 을 넣는다 css와 html파일을 분리 : External box - 박스(block) : 옆에 다른 요소가 못온다 예시) div, p 박스가 아닌것 (inline) : 옆에 다른 요소가 올 수 있다. 예시) a, span display : block를 가진 요소를 inline으로 바꾸고싶으면 display : inline display : inline을 가진 요소를 block으로 바꾸고싶으면 display : block • Inline의 특징 : 높이와 너비.. 2021. 10. 29. [html,css] - head 태그 및 시맨틱 태그 ▶ 보이지않는 태그들로 사이트 설정을 해준다. ▶ 브라우저에게 사이트가 어떻게 보이는지 Meta 태그 부가적인 정보를 뜻하는 태그 아주 다양하게 존재한다. : 브라우저에게 text를 어떻게 그려달라는지 말해줌. ---------------------------------------------------------------------------- Html의 lang 속성 : 검색엔진들에 도움을 주기위해 우리 사이트에서 사용되는 언어가 무엇인지 알려준다. Link 태그 : 탭에 아이콘 이미지를 넣을수 있다. !!! 구글에 검색할때 "mdn" 이라고 붙이면 모질라 화면으로 제공 → html 태그는 엄청 많아서 다 외울 필요는 없다 모든 태그를 다 외울 필요없다. 태그를 작성하는 방법, 속성을 어떻게 찾는지 .. 2021. 10. 25. [Html, Css ] - html , Css는 무엇인가 ? 브라우저는 인간들이 쓰는 언어를 이해못한다.( 멍청함) 우리가 해야할일은 브라우저에게 콘텐츠가 무엇인지 알려줘야한다. HTML (뼈대) : 마크업 언어 : 브라우저에게 웹사이트의 content가 무엇인지 , 어떻게 구성되어있는지 설명할때 사용 Html은 오류가 없다 컨텐트가 무엇인지에 대해서 알려주는것 CSS (근육) : 디자인과 스타일을 위한 언어 : 브라우저에게 웹사이트가 어떻게 보여야하는지에 대해 알려줌 콘텐트들이 어떻게 보일까 자바스크립트 ( 뇌 ) : 웹사이트를 동적으로 만들어주는 프로그래밍 언어 폴더명은 항상 소문자!! 파일명도 항상 소문자!! Community Material Theme : 화면 배경 Material Icon theme : 보이는 아이콘 태그( tag ).. 2021. 10. 22. Flexbox와 Grid * 유투브에 구독중인 1분코딩님의 CSS Flexbox와 CSS Grid, 한번에 정리! 영상을 보면서 정리한 글 flex 기본정리 컨테이너에 display : flex; 를 지정 flex-direction : 자리 설정 ,컨테이너에 디스플레이 설정 후 같이 설정 ( row, column ) flex-wrap : 창이 줄어들때의 고정 (wrap ) justify-content : 지금 현재 축 방향으로 정렬 ( 오뎅꼬치 생각하기 ) align-item : 현재 축의 수직 방향을 정렬하는 스타일 (flex-end, flex-start ,center) align-content : flex-wrap이 wrap 인 경우에 사용가능 flex-grow : 신축성있게 늘려주는 속성 .. 2021. 9. 24. 이전 1 2 다음 728x90 반응형
