html+css 25

clear

float와 같이 쓰이는 속성이다 div1과 div2 는 같은 줄에 있는데 만약에 이둘을 다른줄에 넣고 싶다면 div2의 왼쪽에 떠있는 요소가 없도록 치워주는 역할을 한다 떠있는요소가 없도록 하는것이 clear이다 div2가 새로운 줄로가는데 그래야 왼쪽에 떠있는 요소가 없기 때문이다 그다음에 오른쪽으로 바꿔줘보자 그럼 이렇게 반대로 가게 된다 만약 여기서 보라색 div5의 오른쪽을 비워주고 싶다면 그럼 이렇게 div5의 오른쪽에 떠 있는 요소가 없게하기 위해서 새로운 줄로 가게 된다 clear는 float의 큰 문제를 해결해주는 역할을 한다 만약 이 그리드 div밑에 글자를 넣는다면 글이 그리드의 밑에 안뜨고 그리드의 오른쪽에 뜨게된다 그리드는 모두 float 되어 있어서 떠있다 따라서 텍스트는 뜬 공..

html+css 2023.01.02

float

css중 가장 헷갈릴 수 있는 부분이라고 한다 float - 뜬다라는 뜻 예제를 가져왔당 width 길이를 500px 주고 float: left;를 해주었다 그럼 파란색은 width 500px로 줄어들고 위로 붕떠서 노랑 div를 덮게된다 노란색 div는 100%를 전부 차지하고있다 마찬가지로 이러면 오른쪽 위에 붕 뜨게 된다 이제 다시 left로 바꾸고 노랑 div에 글을 써보면 어라 이상하다 분명히 노랑 div는 width 100%를 차지하고 있는데 글은 파랑 div 옆에서 시작한다 왜냐면 inline 요소나 inline-block 요소는 float로 인해 붕뜨는 지역 에는 갈 수없다 텍스트는 기본적으로 inline요소이기 때문에 float로 왼쪽으로 붕 떠진 파랑 div 아래로는 갈 수 없는 것이다..

html+css 2022.12.28

실습 우표 붙이기

이렇게 만들라고 한다 현재 상태는 다 삐져나온 상태 이걸 위의 도면대로 만들려면 매우 간단하다 일단 env-div가 기준이 되어야 하기 때문에(.adress와 .stamp에 absolute로 포지셔닝을 하기 때문에) 를 해준다 후에 absolute로 포지셔닝을 해준 후 좌측과 아래에 30px씩 공간을 준다 그러면 도면대로 움직여져 있다 absolute로 포지셔닝을 해주면 가장가까운 포지셔닝된 조상에게 기준을 맞추기 때문에 env-div의 기준을 맞추게 된다 .stamp에도 똑같이 absolute로 포지셔닝 후 위30px 오른쪽 30px 공간을 준다 완성

html+css 2022.12.27

position-absolute

지금까지 relative, fixed에 포지셔닝에 대해서 알아보았는데 이번엔 absolute다 포지셔닝이 안된요소는 무조건 position: static; 이다 relative는 원래 있던 위치를 기준으로 fixed는 브라우저를 기준으로 absolute는 가장 가까운 포지셔닝이 된 조상 (Ancestor)요소가 기준이라고 한다 예시를 들기위해 코드를 가져왔당 여기에 원래 초록사각형이 있는 위치에서 top 40px left 90px 떨어졌다 그리고 .blue에는 absolute 로 포지셔닝해주고 bottom값을 40px 준다 그랬더니 .green 에서 40px 아래로 떨어졌다 이건 아까 글에 썼듯이 absolute는 포지셔닝이 된 조상 (Ancestor)요소가 기준 이기 때문에 .blue 의 가장 가까운 ..

html+css 2022.12.26

position-fixed

저번에 했던 position: relative;에서 position: fixed; 로만 바꿔주었다 relative는 요소가 원래 있던 자리를 기준으로 포지셔닝을 해주는데 fixed는 브라우저의 기준이다 브라우저 기준으로 top: 30px; left:50px; 을 잡은 결과이다 또한 fixed는 항상 고정되어 있는데 아무리 스크롤을 내려도 항상 고정되어 있다 또하나 알아둬야 할 건 relative로 포지셔닝을 해주었을 때는 빈칸 그대로 남아있는데 fixed로 포지셔닝을 해주었을 땐 빈칸이 사라진다 이제는 관계가 없다는 뜻 fixed는 주로 흔히 아무리 스크롤을 해도 항상 같은자리에 있기 때문에 네비게이션바에 사용한다 (메뉴바 같은 거)

html+css 2022.12.26

명언 예제

이걸 만들어보자 내가 가장 좋아하는 명언이다 위의 도면대로 만들어보자 따옴표를 클래스로 나누어준다 시작하는 따옴표와 끝나는 따옴표로 클래스이름은 qmark open-qmark와 qmark close-qmark로 나누어 주었따 이제 위의 도면대로 따옴표 중간에 margin을 15px씩 줘야하기 때문에 해줍니다 이제 position: relative;를 해준다 그후 20px 80px 양옆 내려와야 하니까 position:relative로 지정해준뒤 top 20px top 80px로 공간을 준다 그러면 완성!!!

html+css 2022.12.26

position-relative

문장은 그냥 네이버에서 아무문장이나 주워왔다 모든 요소는 기본적으로 position: static; 이다 (기본값) 볼드한 b 태그에 position을 relative로 설정한 후 top 30px을 하면 살짝 이상한 형태가 된다 ㅎㅎ relative는 상대적인 이란 뜻이다 원래 있어야할 자리에서 이동해서 위로 30px의 공간을 주게된다 여기에 까지하면 왼쪽에 50px 의 간격이 있도록 한다 이방식이 margin이랑 다른 점은? 왼쪽으로 간격이 띄어지긴 했는데 다른 친구들도 같이 맞춰서 움직이게 된다 위처럼 position: relative top 30px left 50px 할경우 원래있던 애들은 가만히 있고 원래 있어야할 자리에서 정한 수치값대로 공간이 생긴다 whisky가 원래 있어야 할 위치는 그냥 ..

html+css 2022.12.25

내비게이션 바 로고 실습

로고와 .info를 도면대로 세로정렬 하면 된다 을 해주면 오히려 위로 좀더 올라간다 vertical-align:middle을 하면 img태그의 부모인 x에 중앙에 맞춰지게 된다 따라서 x가 #navbar에 세로 정중앙 위치 시켜야 한다 #navbar의 높이가 60px이기 때문에 #logo 해주면 가운데 정렬이 된다 필요없는 x와 배경색 오렌지를 지워주면 깔끔하게 된다 이제 .info를 세로정렬 시켜보자 info를 세로 정렬 시켜야 하기 때문에 일단 inline-block (inline처럼 같은줄에 있을수 있음 block처럼 가로세로 길이가짐)으로 만들어준다 그럼 이렇게 됨 줄을 맞추기 위해 info앞에 x를 써준다 그 후 vertical-align:middle을 써준다 그럼 x가 inline-block..

html+css 2022.12.22