본문 바로가기

전체 글64

[Css] - position 1. Fixed 레이아웃보다는 위치를 아주조금 위로 , 아주조금 옮기고 싶을때 사용….??? Position :fixed 를 설정해주면 그 박스는 화면에 그대로 고정되어있다 전체 바디를 늘려도 그 자리 그대로 Top, bottom , left, right 프로퍼티 하나만 수정해도 다른 박스랑 같은 선상에 있지않는다 .( 다른 레이어 ) 이것을 사용하면 다른 레이어에 위치해 있을 것이다 모든 것의 위에 있다. 2. Static (디폴트) 레이아웃이 박스를 처음 위치하는 곳에 두는 것 3. Relative element가 처음 위치한 곳 기준으로 수정한다. 보이는 첫 기준점이 정말 중요! Top, bottom , left, right 수정시 element가 처음 위치한 곳 기준으로 수정한다. 4. Absol.. 2021. 10. 31.
[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.
10월27일 수 오늘은 카공!!!!! 역시 공부는 카페와서 하는게 기분전환도 되고 좋아!! ❤️❤️❤️❤️ 2021. 10. 27.
[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.
728x90
반응형

티스토리툴바