본문 바로가기

Programming

기초코딩 - CSS의 기초 (Flexbox에 대해) - 1편 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 Inline Block에 대해 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세요. tm-csc.tistory.com/1174 기초코딩 - CSS의 기초 (Inline Block에 대해) 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 Class의 사용법을 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세요. tm-csc.tist tm-csc.tistory.com 이번 글에서는 FLEBOX에 대해 알려드리려고 합니다. 지난 글에서 inlineblock을 알려드리면서 해당 태그를 사용했을 때 생기는 문제점에 대해서도 알려드렸는데요. 실.. 더보기
기초코딩 - CSS의 기초 (Inline Block에 대해) 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 Class의 사용법을 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세요. tm-csc.tistory.com/1173 기초코딩 - CSS의 기초 (Class에 대해서) - 2편 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 Class를 왜 사용해야 하는지 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세 tm-csc.tistory.com 이번 글에서는 inline block에 대해 조금 더 자세히 알려드리도록 할게요. 그럼 우선 VSC을 실행해주세요. 그다음 이렇게 div 박스를 3개 만들어주고 나서 width: 30px; heig.. 더보기
기초코딩 - CSS의 기초 (Class에 대해서) - 2편 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 Class를 왜 사용해야 하는지 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세요. tm-csc.tistory.com/1171 기초코딩 - CSS의 기초 (Class에 대해서) - 1편 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 보더(border)에 대해 전반적으로 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주 tm-csc.tistory.com 이번 글에서는 Class를 어떻게 사용하는지 알려드릴게요. 일단 Class는 id와 달리 겹쳐도 되고 지정하여 스타일은 변경시킬 수 있다고 알려드렸죠. 그럼 일단 VSC를 실행해주세요.. 더보기
기초코딩 - CSS의 기초 (Class에 대해서) - 1편 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 보더(border)에 대해 전반적으로 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세요. tm-csc.tistory.com/1169 기초코딩 - CSS의 기초 (보더(border)에 대해) 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 패딩에 대해서 알려드리면서 박스 안의 박스를 통해 색상변경과 패딩 값을 변경하는 방법에 대해 알려드렸는데요. 만약 tm-csc.tistory.com 이번 글에서는 class에 대해 알려드리도록 하겠습니다. 그럼 먼저 VSC를 실행시켜주세요. 그리고 이렇게 span이라는 글을 쓰기 위한 박스를 만들어주시고요. body에 마진 값을 20px정.. 더보기
기초코딩 - CSS의 기초 (보더(border)에 대해) 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 패딩에 대해서 알려드리면서 박스 안의 박스를 통해 색상변경과 패딩 값을 변경하는 방법에 대해 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세요. tm-csc.tistory.com/1168 기초코딩 - CSS의 기초 (패딩에 대해) - 2편 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 패딩에 대해서 알려드리면서 id에 대해서도 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 tm-csc.tistory.com 이번 글에서는 보더(border)를 알려드리도록 하겠습니다. 사실 보더는 마진이나 패딩에 비해 상당히 쉽습니다. 왜냐하면 이 둘의 경계를 .. 더보기
기초코딩 - CSS의 기초 (패딩에 대해) - 2편 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 패딩에 대해서 알려드리면서 id에 대해서도 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세요. tm-csc.tistory.com/1166 기초코딩 - CSS의 기초 (패딩에 대해) - 1편 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 마진에 대해서 작성하는 방법부터 개념까지 조금 더 자세히 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시 tm-csc.tistory.com 바로 이어서 가겠습니다. #first { background-color: balck; } 이렇게 적고 첫 번째 div상자의 색상을 검은색으로 변경해주었는데요. #first { backgro.. 더보기
기초코딩 - CSS의 기초 (패딩에 대해) - 1편 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 마진에 대해서 작성하는 방법부터 개념까지 조금 더 자세히 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세요. tm-csc.tistory.com/1164 기초코딩 - CSS의 기초 (마진, 보더, 패딩에 대해) - 2편 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 브라우저는 마진, 보더, 패딩에 대해 대략적으로 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 tm-csc.tistory.com 이번 글에서는 패딩에 대해 조금 더 자세히 알려드리려고 하는데요. 패딩은 마진과 반대라고 생각하시면 편합니다. 마진은 박스의 경계로부터 바깥에 있는 공간을 얘기.. 더보기
기초코딩 - CSS의 기초 (마진, 보더, 패딩에 대해) - 2편 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 브라우저는 마진, 보더, 패딩에 대해 대략적으로 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세요. tm-csc.tistory.com/1163 기초코딩 - CSS의 기초 (마진, 보더, 패딩에 대해) - 1편 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 브라우저는 box에 대해 알려드리면서 block과 inline에 대해 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 tm-csc.tistory.com 이번 글에서는 이어서 마진에 대해 좀 더 자세히 알려드리겠습니다. 저번 글을 보면 이렇게 div라는 박스를 만들었을 때 마진 때문에 브라우저와 div 사이.. 더보기
기초코딩 - CSS의 기초 (마진, 보더, 패딩에 대해) - 1편 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 브라우저는 box에 대해 알려드리면서 block과 inline에 대해 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세요. tm-csc.tistory.com/1161 기초코딩 - CSS의 기초 (box 개념 block 과 inline) 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 브라우저는 CSS 코드를 순서대로 읽는다는 사실을 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 tm-csc.tistory.com 이번 글에서는 block에 대한 중요한 특징에 대해서 알려드리도록 하겠습니다. 그럼 VSC를 실행시켜주세요. 먼저 div와 span을 하나씩 .. 더보기
기초코딩 - CSS의 기초 (box 개념 block 과 inline) 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 브라우저는 CSS 코드를 순서대로 읽는다는 사실을 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세요. tm-csc.tistory.com/1159 기초코딩 - CSS의 기초(CSS는 순서대로 읽는다) 지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 CSS 코드 작성방법에 대해 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세요. tm-csc.tistory.com 이번 글에서는 Box에 대해 알려드리도록 하겠습니다. 바로 예시로 설명드리면 네이버의 한 예시를 가져와서 보여드리는 건데요. 어떤 웹사이트이든지 그걸 이루는 모든 요소 들은 .. 더보기