본문 바로가기

분류 전체보기

CSS Layout - Horizontal & Vertical Align 가운데 정렬 요소와 같은 블럭 요소를 수평적으로 가운데로 놓기 위해 margin:auto를 쓴다.요소의 너비를 설정하는 것은 컨테이너의 가장자리를 넘어서 늘어나는 것을 방지한다.그 요소는 지정된 너비를 차지할 것이고 남은 공간은 동등하게 분할될 것이다.너비가 지정되지 않거나 100%이면 가운데 정렬은 안된다.예시 텍스트 가운데 정렬text-align:center; 이미지 가운데 놓기왼쪽 오른쪽 margin을 auto로 지정하고 block 요소로 만든다.예시 왼쪽 오른쪽 정렬 - positionposition:absolute;를 써서 요소를 정렬한다.오른쪽에 요소를 붙이고 싶으면 right:0px; 왼쪽에 요소를 붙이고 싶으면 left:0px;예시 왼쪽 오른쪽 정렬 - floatposition과는 다르게 ..
CSS Layout - display:inline-block display:inline과 비교하여 주된 차이는 display:inline-block은 너비와 높이 설정을 허용한다는 것이다.또한 top bottom margin padding이 존중된다display:block과의 주된 차이는 display:inline-block은 요소 다음에 줄 바꿈이 없다는 것이다. 그래서 다른 요소 옆에 위치할 수 있다. 아래 예시를 보면 inline은 요소가 나란하지만 높이 너비 패딩이 무시된다. inline-block이 적용된 span은 div 옆에 붙어있게 된다. 그리고 너비가 잘 적용되므로 창의 너비를 넘어섰기 때문에 줄바꿈이 있는 것처럼 보인다. width를 줄이면 높이가 적용된 span을 볼 수 있다. display:block은 너비 높이 패딩이 다 적용되지만 줄바꿈이..
CSS Layout - float and clear float 속성은 요소가 어떻게 떠있는지 지정한다.clear 속성은 지워진 요소 옆에 어떤 요소가 떠오르며 어떤 면에 떠있을 수 있는지 지정한다. (뭔말인지..) float 속성float 속성은 웹 페이지의 레이아웃과 위치 지정을 위해 쓰인다.float 속성은 다음 값을 가질 수 있다left : 요소는 컨테이너의 왼쪽에 떠있다right : 요소는 컨테이너의 오른쪽에 떠있다.none : 요소가 떠있지 않다. 기본값inherit : 요소는 부모의 float 값을 상속한다. 가장 간단한 사용에 있어서 float 속성은 이미지 주변 텍스트를 감싸는 데 쓰일 수 있다. float : righthttps://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float..
CSS Layout - Overflow overflow 속성은 컨텐츠가 너무 커서 영역에 들어갈 수 없는 경우를 제어한다.다음과 같은 값을 가진다.visible : 기본값. 넘치는 부분이 잘리지 않는다. 넘치는 부분을 요소의 박스 바깥에 렌더링한다.hidden : 넘치는 부분이 잘린다. 넘치는 부분이 보이지 않는다.scroll : 넘치는 부분이 잘린다. 넘치는 부분을 볼 수 있게 스크롤바가 생긴다.auto : 넘치는 부분이 잘린다면 남은 부분을 볼 수 있게 스크롤바가 추가된다. overflow 속성은 높이가 지정된 블럭 요소에서만 작동한다. overflow : visible div { width: 200px; height: 50px; background-color: #eee; overflow: visible; }https://www.w3sch..
CSS Layout - The position Property position 속성은 요소의 위치 지정 방식의 유형(static, relative, fixed, absolute, sticky)을 지정한다. position:static;HTML 요소는 기본적으로 static 포지션이다. position:static;인 요소는 top, bottom, left, right 속성에 영향을 받지 않는다.div.static { position: static; border: 3px solid #73AD21; } position:relative;normal 포지션에 상대적으로 위치한다.top, bottom, left, right 속성을 지정하면 normal 포지션으로부터 벗어나 수정된다.div.relative { position: relative; left: 30px; borde..
CSS Layout-width and max-width Using width, max-width and margin:auto; width를 설정하는 것은 컨테이너의 모서리보다 넘치는 것을 예방한다. margin을 auto로 하고, 수평적으로 중앙을 맞출 수 있다. 그 요소는 지정된 width를 가지고 남은 공간은 동등하게 분할될 것이다.하지만 이것의 문제는 브라우저 창이 요소의 width보다 작을 경우이다. 브라우저는 페이지에 수평 스크롤바를 추가한다. max-width를 대신 쓰면 작은 창의 브라우저를 잘 다룰 수 있다. 작은 기기에서 사이트를 사용할 수 있게 하려면 중요하다. ex2는 너비가 500px 이하가 되어도 짤리지 않고 반응형으로 border가 모두 표시된다. div.ex1 { width: 500px; margin: auto; border: 3p..
CSS Layout-the display property display 속성은 레이아웃을 제어하기 위한 가장 중요한 속성이다. the display propertydisplay 속성은 요소가 표시될지 말지, 어떻게 표시될지 지정한다.모든 HTML 요소는 해당 요소의 타입에 따라 기본 display 값이 있다. block, inline이 있다. Block-level Elements항상 새로운 줄에서 시작하고 전체 너비를 가진다., -, , , , , 이 block 요소이다. Inline Elements새로운 줄에서 시작하지 않고 필요한 만큼만 너비를 가진다., , 가 inline 요소다. Display:none;display:none;은 요소를 삭제하거나 생성하지 않고 숨기거나 보여주기 위해 흔히 쓰인다. 요소는 display:none;을 기본으로 쓴다. Ove..
백준 2775번 부녀회장이 될테야 0층은 1~n호에 각 호에 대응되는 인원이 거주한다.각 층의 1호에는 1명만 산다. 1층의 2호는 0층의 1호와 2호를 합하면 된다. 배열로 표현하면 arr[1]+=arr[0]이다. 0층부터 k층까지의 n호를 쭉 구하면 배열이 갱신되면서 각 층의 각 호에 사는 사람들이 나온다. 마지막으로 나온 배열의 마지막 인덱스에 있는 값이 찾고자 하는 값이 된다. 4층 1 6 21 56 126 3층 1 5 15 35 70 2층 1 4 10 20 35 1층 1 3 6 10 15 0층 1 2 3 4 5 1호2호 3호 4호 5호 t=int(input()) for i in range(t): k=int(input()) n=int(input()) arr=[j for j in range(1,n+1)] for l in range(..

티스토리툴바