전체 글46 [css] Negative Margins(음수 마진) 종찬 강사님의 특강 강의를 듣고 작성된 글입니다. https://www.youtube.com/watch?v=OVaKTdFe5Bk 이번 종찬강사님의 특강을 듣고 알게된 Negative Margins 에 대한 포스팅을 남기려 합니다. 평소 양수로만 margin을 써왔던 저로선 굉장히 낮선 단어 조합이었습니다. 음수 마진은 대체 언제 쓰이며 어떤 특징을 가지고 있을까? 요소에 음수 마진(margin-left)을 주게 되면 아래그림 처럼 요소가 끌어 당겨지는것을 볼 수 있습니다. 음수 마진의 사용은 오류가 아니며 W3C에서도 "마진 속성에 음수 값이 허용됩니다"라고 표기 돼있다. 보여지는것에 비해 차지하고 있는 공간이 다르다 float가 적용되면 다르게 반응한다 음수 마진은 top / left 와 bottom .. 2023. 3. 20. [html] img 사용 이유와 관련 속성 사이트를 만들다 보면 이미지를 넣어야 하는 경우가 많은데 나는 작은 이미지들은 html에 img 태그로 다 넣고 크게 깔리는 배경들만 css에서 background 속성으로 이미지를 채웠었다. 하지만 이는 좋은 방법은 아니라고 한다. 🤔 img 태그와 background-img 속성의 차이점은? 이 둘의 가장 큰 차이점은 img 는 시맨틱 태그라는 점이다. 시맨틱 태그는 컴퓨터와 사람 모두에게 의미를 명확하게 설명해주는 역할을 한다. 그럼 의미를 명확하게 설명해주는 시맨틱 태그인 img 를 사용하면 어떤 점이 좋을까? 검색시 노출이 된다. 시각장애가 있는 사용자가 화면 판독기로 페이지를 탐색할때 탐색이 가능하다. 이미지가 로딩이 되지 않을때 alt 속성으로 대체 텍스트가 뜬다. html이 구문 분석이 될.. 2023. 3. 19. [CSS] flex-cotainer, item flex flex는 flexible box, flex box 라고 부르기도 합니다. 레이아웃 배치 전용으로 나온 속성이라 간편하게 레이아웃을 정렬할 수 있는 1차원적 레이아웃 모델입니다. flex 를 사용하기 위해서는 display 속성을 통해 flex 값을 주면 되는데 이는 자식을 배치하는 방식을 설정하는 것이며 자식들은 유연하게 빈 공간을 치우거나 컨테이너를 넘거아지 않도록 줄어듭니다. 또한 자식 간의 수평 및 수직 정렬 과 빈 공간의 크기를 쉽게 조작할 수 있습니다. 얼마나 쉬운지 한번 살펴볼까요? 아래는 float를 통해 왼쪽 정렬한 코드입니다. 왼쪽 정렬을 위해 float:left로 띄우고 부모가 높이값을 갖고 그 외에 다른 요소들도 흘러가지 않도록 clear을 통해 flaot을 해제 시켜주는 .. 2023. 3. 11. [CSS] float 사용 후 clear를 사용하는 이유는 뭘까 float float는 한 요소가 흐름에서 빠져나와 단어 그대로의 의미대로 떠있는 특징을 가지고 있다. 원래 float속성은 사진과 텍스트를 같이 배치하기 위해 쓰여졌지만 현재에는 웹페이지의 레이아웃을 잡을때 많이 사용하고 있다. left 왼쪽 정렬 기준으로 띄우는 속성값 right 오른쪽 정렬 기준으로 띄우는 속성값 none initial value 띄우지 않는 다는 의미 이런 float는 사용 후에 꼭 해제를 해줘야합니다 이유는 2가지 입니다 float 요소가 좌측이나 우측에 띄어지면서 다른 요소들에게도 흐름에 영향을 미친다. float 속성 은 부모보다 더 높이 띄어져 있으므로 부모에게 높이의 영향을 주지 못한다. 그럼 이제 어떻게 해결해야할까?🤔 일단 float로 띄워서 left정렬을 하고 아직 .. 2023. 3. 11. 이전 1 ··· 3 4 5 6 7 8 9 ··· 12 다음
