Loading...
2022. 8. 7. 18:59

inline 요소와 block 요소 완전 정복

1. css 원칙 2 "모든 요소는 네모(박스모델)이고 좌측 상단부터 위에서 아래로, 왼쪽에서 오른쪽으로 배치" "display에 따라 크기와 배치가 달라진다" 박스로 쌓이는 태그들을 display 설정에 따라 배치해나간다 2. block display:block 줄 바꿈이 일어나는 요소 말 그대로 블록처럼 위에서 아래로 쌓인다 화면 크기 전체의 가로 폭을 차지 그러니까 다음 블록을 쌓으면 다음 줄에 쌓인다 물론 width로 크기를 지정할 수 있는데 그렇다고 해서 여러 block이 한줄에 쌓이는 것은 아니다 width만큼 내용물을 채우고 그만큼 우측에 margin을 자동으로 채우나봐 블록 요소 안에는, 인라인 요소가 들어갈 수 있다 대표적인 블록 요소는 div, ul,ol,li, p, hr, form 3..

2022. 8. 7. 16:33

css box model 정복하기

1. css의 대원칙 'css의 모든 요소는 박스다' 모든 요소는 네모(박스모델)이고 위에서부터 아래로, 왼쪽에서 오른쪽으로 쌓인다 원으로 생긴것도 자세히보면 박스안에 들어가있고 2. normal flow 기본적으로 inline 요소는 왼쪽에서 오른쪽으로 나아가고 block요소는 위에서부터 아래로 쌓인다 3. box model 모든 html 요소는 box 형태로 되어있다 하나의 box는 네 부분으로 나뉜다. margin, border, padding, content padding과 margin을 구별을 잘 해야하는데 테두리 border를 중심으로 안쪽에 내용물과 테두리 사이 공백이 padding이고 테두리와 바깥 다른 요소 사이 공백이 margin이다 기본적인 요소를 먼저 생성하고 top에 24px; 만..

2022. 8. 7. 05:25

css position 정복하기

1. position 속성 static, relative, absolute, fixed, sticky 모든것이 box로 되어있는 html 태그들은 기본적으로 위에서부터 아래로 쌓이는데, 필요에 따라 다르게 배치하고 싶을 때가 있다 기본값은 왼쪽이지만 오른쪽처럼 만들고 싶다면..? 2. relative 자기 자신의 static 위치를 기준으로 이동함 원래 나 자신이 있어야할 위치에서, top, left, right, bottom의 몇 pixel만큼 위치를 옮기는 것 레이아웃에서 여전히 static에 공간을 차지하고 있으며, 사람 눈에만 이동한 것처럼 보인다 3. absolute 브라우저 화면 기준으로 위치를 이동시킴 화면에서 공중에 뜬 것처럼 일반적인 flow를 벗어남 일반적인 normal flow에서 제..

2022. 8. 3. 01:46

overflow 옵션 완전정복

1. overflow 기능 overflow는 부모요소와 자식요소 사이 관계에서 부모요소가 자식요소를 어느정도 보이게 만들지 결정하는 기능 기본값은 overflow: visible;인데 위와 같이 자식요소(좌,우측상단 파란색박스)가 부모요소(상단 검정색 박스)를 넘어가더라도 내용을 전부 보여준다 overflow: hidden;을 주면 아래와 같이 자식요소에서 넘어가는 부분을 숨겨준다 overflow: auto;와 overflow: scroll;은 hidden에서 숨겨진 부분을 보고싶을때 스크롤 기능을 제공한다 overflow: auto;는 자식요소가 넘어가지 않는다면 visible처럼 전부 보여주는데, 자식요소가 넘어간다면 hidden처럼 숨기고 스크롤바를 제공한다 overflow: scroll;은 자식요..

2022. 8. 1. 02:22

집합 set의 메소드

1. set 중복되는 요소가 없이, 순서에 상관없는 데이터들의 묶음 중복을 허용하지 않으므로 중복되는 원소가 있다면 하나만 저장함 순서가 없으므로 인덱스를 이용한 접근이 불가능하다 수학에서 집합을 표현한 자료형 >> 집합연산이 가능한데, 여집합을 나타내는 연산자는 별도로 존재하지 않아 >> 중복된 값이 존재하지 않아 담고 있는 요소를 삽입, 변경, 삭제가 가능함 >> 가변 자료형(mutable) 2. set의 메소드 리스트에서 append()를 쓰는것과는 다르게 set은 add로 추가한다는 점에서 add가 제일 중요하고.. 나머지도 알아보자고 set은 순서가 없는 자료형이기 때문에 s.pop()을 하면 랜덤하게 항목을 제거해서 반환한다고함 비슷하게 add()도 랜덤한 위치에 넣는다고 하는데 3. s.ad..

2022. 8. 1. 01:35

딕셔너리의 메소드

1. 딕셔너리(dictionary) key,value 쌍으로 이루어진 자료형 key는 변경불가능한 데이터인 string, integer, float, boolean, tuple, range 등 만 가능 key로 리스트는 불가능하고 튜플은 가능 그러니까 key는 직접적으로 이름 변경이 불가능하고 삭제하고 새로 만들든지 간접적으로 변경 가능 key의 value는 어떠한 형태든 가능하다 3.7부터는 key의 입력 순서를 보존해줌 이를 이용하면 key를 정렬할 수도 있음 근데 주피터노트북에서 print말고 그냥 출력하면 순서가 항상 정렬된것처럼 보이네 2. 딕셔너리의 여러가지 메소드 자주 사용하는 것은 역시 d.keys(), d.values(), d.items() 가끔 사용하는 것은 d.get(k,v) 여기서 ..