일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- 컴퓨터공학 #자료구조 #스택 #c++ #알고리즘 #백준문제풀이
- HTML #CSS
- 컴퓨터공학 #c #c언어 #문자열입력
- 잔
- BOJ #컴퓨터공학 #C++ #알고리즘 #자료구조
- 컴퓨터공학 #Java #자바 #클래스 #객체 #인스턴스
- Today
- Total
목록Front-end (54)
영벨롭 개발 일지
왜 시맨틱 태그로 레이아웃을 만들어야 할까? 웹 문서 레이아웃을 만들 때 시맨틱 태그를 사용하지 않더라도 웹 문서를 만들 수 있지만, 실제로 웹 브라우저에서 문서를 처리할 때는 매우 큰 차이가 있습니다. 시맨틱 태그로 작성한 소스는 태그만 보고도 어느 부분이 제목이고 메뉴이고 실제 내용인지 쉽게 알 수 있습니다. 이렇게 소스만으로도 문서 내용을 알 수 있으면 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있어 편리합니다. 그만큼 사이트 내용을 정확히 전달할 수 있고, 태그에 대한 역할이 정확히 정해졌기 때문에 어떤 장치에서든 문서를 똑같이 해석할 수 있습니다. 태그 - 머리말 지정 태그는 특정 부분의 머리말에 해당하며 사이트 전체의 헤더는 주로 페이지 맨 위쪽이나 왼쪽에 삽입합니다. 또한 본문 중에 ..
우리는 크기를 설정할 수 있는 블록 요소로 레이아웃을 짜야 합니다. 하지만 블록 요소는 수직으로 쌓이는 속성이 있죠? 그렇다면 블록 요소들을 가로배치하는 방법에는 어떤 것들이 있을까요? 바로 float, flexbox, grid 속성이 있습니다. 하나씩 차례대로 살펴봅시다. float - 왼쪽이나 오른쪽으로 배치하기 float 속성은 요소를 문서 위에 둥둥 떠 있게 만듭니다. 여기서 '둥둥 떠 있다'라는 의미는 왼쪽 구석이나 오른쪽 구석에 요소가 배치된다는 뜻입니다. 속성 값 설명 left 요소를 문서의 왼쪽에 배치 right 요소를 문서의 오른쪽에 배치 none 좌우 어느 쪽에도 배치하지 않음 box1 box2 box3 .box div{ font-size: 20px; border: 3px solid b..
박스 모델은 블록 요소인지 인라인 요소인지에 따라 나열 방법이 달라집니다. 그러므로 블록 요소와 인라인 요소의 차이점을 살펴보고싶으시다면 다음 포스팅을 봐주세요! https://iridescent-zeal.tistory.com/75?category=1261251 [HTML]인라인 요소와 블록 요소: 요소가 화면에 출력되는 특성 요소가 화면에 출력되는 특성에는 글자와 상자, 크게 2가지로 분류할 수 있습니다. 글자는 인라인(inline) 요소, 상자는 블록(block) 요소인데요! 하나씩 살펴봅시다. 먼저 요소(elemnet)란 기본적 iridescent-zeal.tistory.com 박스 모델 Box Model 박스 모델 요소는 박스 형태인 요소를 말합니다. 박스 모델은 실제 콘텐츠 영역, 박스와 콘텐츠..
박스 포스팅(https://iridescent-zeal.tistory.com/95?category=1261251)에서 박스를 다루는 몇 가지 방법을 살펴보았습니다. 오늘은 박스의 구성하는 것들 중 margin과 padding을 자세히 살펴보겠습니다. Margin 과 padding margin은 박스 요소와 웹 페이지 사이의 여백 즉, 요소의 외부 여백을 지정하는 단축 속성입니다. padding은 요소의 내부 여백을 지정하는 단축 속성입니다. 속성 값으로는 다음과 같은 값들을 지정할 수 있습니다. (아래 설명은 padding에도 동일합니다.) 속성 값 설명 0 외부 여백 없음 auto 브라우저가 여백을 계산 단위 px, em, vw 등 % 부모 요소의 가로 너비에 대한 비율로 지정 margin과 paddi..
우선 다음과 같이 코드를 작성해보겠습니다. Hello World 태그는 블록 요소로, 요소가 수직으로 쌓이는 것을 확인할 수 있습니다. 이 두 개의 태그를 각각 왼쪽, 오른쪽에 같은 줄에 위치시키기 위해선 어떤 속성을 부여해야할까요? 먼저 text-align 속성을 사용해보겠습니다. .hello { font-size: 30px; font-weight: bold; text-align: left; } .world { font-size: 30px; font-weight: bold; text-align: right; } 각 요소들이 왼쪽, 오른쪽 정렬은 되었지만 여전히 다른 줄에 위치해있죠? 블록 요소를 같은줄에 왼쪽, 오른쪽 정렬하기 위해선 float 속성을 사용합니다. float 말 그대로 요소를 '둥둥 띄..
오늘은 박스에 관련된 CSS 속성을 알아보고 박스를 갖고 놀아보겠습니다 ㅎ ㅎ 초기 박스 먼저 아무 스타일이 적용되지 않은 박스를 볼까요? html 파일에 다음과 같이 작성하면 Hello 페이지는 요렇게 보입니다. 태그를 통해 박스를 만들긴 했는데 박스 형태가 눈으로 보이진 않죠! 웹 페이지에서 f12 키를 눌러 개발자 도구의 요소(Elements) 패널로 가보세요! 그런 다음 위 코드에서 부분에 마우스를 올리면 영역이 눈에 보입니다. 웹 페이지에선 보이지 않지만 박스가 만들어진건데요! 이제 css 스타일을 적용해서 이 박스를 갖고 놀아볼게요 박스 색칠하기 & 박스 테두리 그리기 우선 박스가 눈에 보여야 갖고 놀겠죠? background-color 속성을 통해 박스를 색칠할 수 있습니다. backgrou..