Block 태그와 Inline 태그의 가운데 정렬 방법이 다릅니다. Block과 Inline의 구분은 아래 링크를 참조해주세요! https://nack1400.tistory.com/17?category=1242740 [HTML] #9 Block 태그, Inline 태그 비교 정리(블록vs인라인 태그 정리) 이번에 정리를 해볼 것은 block형 태그와 Inline형 태그입니다. 태그를 사용할 때 이 점을 유의해서 사용하면 훨씬 수월하게 페이지를 구성할 수 있다고 하더군요. 한번 정리해보고 공부해보겠습니 nack1400.tistory.com 박스 = Block 태그 텍스트 = 일반 글자, Inline 태그 1. 박스의 가운데 정렬 (div, Block 태그) 1) 수평 가운데 정렬 방법 margin: aut..

1. box-sizing box-sizing은 css 속성이다 속성 값으로는 content-box, border-box가 있다 기본값은 content-box이다.( 박스 크기가 바뀜 --> 컨텐츠 크기는 그대로 border-box의 width, height = content + border + padding 만약 padding이나 border 값을 조정한다면? --> 박스 크기는 그대로 --> 컨텐츠 크기가 바뀜 *박스 모델 변경이 필요한 이유* 기본값인 content-box는 padding 값이나 border 값을 바꾸면 박스의 크기 바뀌게 되어 원하는 형태의 스타일링이 어려워지기 때문 그래서 보통은 편한 스타일링을 위해 border-box로 변경해서 많이 사용한다. 3. 예시 See the Pen U..

CSS 변수 사용하기 css도 다른 프로그래밍 언어처럼 변수를 선언하고 값을 저장하는 형태처럼 사용할 수 있음 자주 사용하는 색이나 폰트의 설정값을 편리하게 사용 가능 코드를 변경할 때도 변수 값만 바꾸면 되기에 유지보수에 유리 1. 변수 선언 --variable-name: value; 2. 변수 사용 property: var( --variable-name ) 3. 예시 See the Pen Untitled by KwonRakhyun (@nack1400) on CodePen. 변수를 선언한 노드와 자식 노드들이 변수를 사용 가능함 그렇지만 보통은 root에 선언을 해서 전체가 사용 가능하도록 선언함

이번에는 flexbox에 대해서 정리를 해보려 합니다. 구현이 쉽지 않은 유연하고 동적인 레이아웃을 간단하게 구현할 수 있도록 도와주는 것이 flexbox인데요 박스들의 크기나 방향, 정렬 등을 유연하게 정리할 수 있어 굉장히 유용한 방식입니다. 보기 편하고 간단하게 자주 쓰는 것 위주로 한번 정리해보겠습니다! 제가 자주 보는 유튜버가 있는데요 많은 사용방법 중 이 분이 강의해주신 영상을 참고로 만들었습니다! 출처 : 유튜브 - 드림코딩 by 엘리 https://youtu.be/7neASrWEFEM 1. flexbox 설정 방법 - 설정하고 싶은 요소들이 들어있는 박스 태그에 display : flex;를 선언한다 .container { display: flex; } - flexbox는 기본축과 반대 축..

이번에는 웹페이지의 전체적인 틀을 짜는 데에 필수적인 position 속성에 대해서 한번 정리해보겠습니다. 1. position 속성 값 정리(static, relative, absolute, fixed, sticky) 위치 변경 가능 여부 위치 기준 간단한 설명 static X 원래 있어야 할 위치 태그가 있어야 할 위치에 변경 없이 위치 relative O 원래 있어야 할 위치 태그가 있어야 할 위치 기준으로 상하좌우를 변경 absolute O 담겨있는 박스 이 태그가 포함된 박스의 원점을 기준으로 변경 fixed O 웹페이지 전체 박스 상관없이 웹페이지 전체 기준으로 변경 sticky O 원래 있어야 할 위치 스크롤을 위치 밖으로 옮겨도 화면에 보이도록 위치 2. 예시 See the Pen Unti..

이번에는 css에서 자주 헷갈리는 display 속성을 한눈에 알아볼 수 있도록 정리해보겠습니다. 인라인 태그와 블록 태그의 특징을 살펴보고 css에서 display를 변경했을 때 어떻게 나타나는지 알아보겠습니다. 블록 태그와 인라인 태그에 대한 것과 어떤 것이 있는지는 아래 링크를 참조하시면 됩니다! https://nack1400.tistory.com/17 [HTML] #9 Block 태그, Inline 태그 비교 정리(블록vs인라인 태그 정리) 이번에 정리를 해볼 것은 block형 태그와 Inline형 태그입니다. 태그를 사용할 때 이 점을 유의해서 사용하면 훨씬 수월하게 페이지를 구성할 수 있다고 하더군요. 한번 정리해보고 공부해보겠습니 nack1400.tistory.com 1. inline, bl..

이번에 정리를 해볼 것은 block형 태그와 Inline형 태그입니다. 태그를 사용할 때 이 점을 유의해서 사용하면 훨씬 수월하게 페이지를 구성할 수 있다고 하더군요. 한번 정리해보고 공부해보겠습니다! 1. Block 태그? Inline 태그? 1) Block 태그 Block 태그는 box를 치는 태그들이라고 생각하면 편하다. 전체적인 틀을 짠다던지 구조를 만들 때 사용하는 태그들은 Block 태그들이다. 특징은 아래와 같다. 항상 새로운 줄에 태그가 생성 좌우 너비가 100%라서 한 줄을 독차지 오른쪽에 공간이 남아있더라도 새로운 태그는 다음 줄에 생성된다. 2) Inline 태그 Inline 태그는 위에 block 태그와는 다르게 내용을 적는 태그라 생각하면 된다. 블록 태그로 짜여진 틀 안에 내용을..

테이블 관련 태그들을 정리해보겠습니다! 테이블 태그 : 테이블을 이루는 태그 : table head, 제목을 적는 태그 (굵은 글씨체, 글이 중앙 정렬됨) : table row, 테이블의 행을 만드는 태그 (글이 왼쪽 정렬됨) : table data, 내용을 적는 태그 (글이 왼쪽 정렬됨) 예시) 열이름1 열이름2 열이름3 내용1 내용2 내용3 테이블 제목 : 테이블 제목을 적는 태그 예시) 테이블 제목 열이름1 열이름2 열이름3 내용1 내용2 내용3 테이블 열 합치기, 행 합치기 : 입력한 수많은 가로로 셀을 합친다 : 입력한 수만큼 세로로 셀을 합친다. 예시) 열 합치기 1 3 4 5 6 행 합치기 1 2 3 5 6 열/행 합치기 응용 1 2 5 8 9 10 11 이상 테이블 태그에 대해서 알아보았습..

html 리스트 사용 방법을 정리해보겠습니다. 리스트 태그 1. 순서가 없는 리스트(unordered list) - ul 태그 사용방법 내용 내용 내용 내용 출력 모습 1-1. 리스트 스타일 변경, 모양 변경 - disc : 검은색 작은 원 모양 (기본 설정) - circle : 흰색 작은 원 모양 - square : 사각형 모양 사용방법 내용 내용 내용 내용 출력 모습 2. 순서가 있는 리스트(ordered list) - ol 태그 사용방법 내용 내용 내용 내용 출력 모습 2-1. 리스트 숫자 바꾸기, 스타일 변경 - decimal : 숫자 (기본설정) - upper-alpha : 영문 대문자 - lower-alpha : 영문 소문자 - upper-roman : 로마 숫자 대문자 - lower-roma..

자주 사용하는 링크와 이미지를 삽입하는 방법입니다. 링크 삽입 기본적인 방법 : 예) target 속성 값 추가 (어디에서 열 것인가 명시) 예) _blank : 새 창이나 새 탭에서 오픈. _self : 현재 프레임에서 오픈. (기본) _parent : 부모 프레임(frame)에서 오픈. _top : 현재 창의 가장 상위 프레임(frame)에서 오픈. 프레임(frame) : 이름 링크로 연결된 문서를 지정된 프레임(frame)에서 오픈. tistory tistory 01Style Page 01Style page 바로 위에 링크를 눌렀을 때 아래에서 실행됨 이미지 삽입 기본적인 사용 방법 : 예) 현재 이미지가 저장된 폴더는 이렇게 되어있습니다. 월드 와이드 웹(World Wide Web, WWW, W3..