목록개발/프론트엔드 (58)
JongDDA의 한걸음 한걸음씩
1. CSS 의 전역 속성값 - inherit : 자신을 품고 있는 상위 태그의 값을 물려받는다. - initial : 초기값 사용하기(아무것도 지정 안돤 상태) - unset : 상위 태그가 물려줄 값이 있다면 그것을 물려받고, 그렇지 못할 경우에는 초기값을 그냥 사용한다. 2. 색상 지정하는 다양한 방법 - 색상에 해당하는 단어를 지정하기 - RGB 코드를 사용하기 (빨 녹 청의 비율) 예) #A566FF : 두 문자씩 각각 빨, 녹, 청을 의미하는 16진수 값 그리고 앞의 # 은 색상코드임을 나타내는 기호 ex) #FF9900 포지셔닝 관련속성, float - 요소의 스타일을 지정하고 나면, 배치에도 신경써야 한다. - 콘텐츠 영역의 위치를 세부 조정하는 작업을 포지셔닝이라 한다. - float :..
1. 박스의 배치(display) 속성 display : 해당 요소가 화면에서 어떤 식으로 공간을 차지하게 될지, 또 어떤 형태로 배치될지를 결정한다. - 속성 1. block : 가로 공간을 모두 차지한다. 따라서 다음 요소는 반드시 아래 쪽에 위치한다. width, height 등을 가질 수 있다. - 속성 2. inline : 필요한 만큼만 공간을 차지한다. 따라서 다음 요소는 옆에 위치할 수 있다. width, height 등에 대한 제약이 있다. - 속성 3. inline-block : 배치는 inline처럼 되는데, 속성은 block 처럼 가진다! 즉 너비와 높이, 여백 등을 가질 수 있다. - 속성 4. none : 아예 없는 것처럼 만들어버린다! - 속성 5. flex : 불필요한 여백을 ..
1. 목록에 대한 스타일 - 태그에 대해 목록 스타일을 지정할 수 있다! => list-style-type 속성 : disc(기본), 웬만한 도형. => list-style-position 속성 : 들여쓰기 간격 조정. 2. 배경에 대한 스타일 - background-image : 배경 이미지 소스 파일 지정 - background-repeat : 배경 이미지 바둑판 효과 여부 지정 - background-size : 배경 이미지의 크기 또는 채워지는 방식 지정 - background-position : 배경 이미지의 위치 지정하기(키워드) 1. 배경 색깔과 배경 이미지 혼용하기 - background-blend-mode : 배경 요소를 모두 섞기 2. 블록 태그의 여백 관련 속성 - margin : b..
1. CSS (Cascading StyleSheet, 계층식 스타일시트) - HTML 문서의 스타일을 적용하기 위해 사용하는 양식 - 웹문서에서 스타일이란, 문서에서 사용하는 글꼴이나 색상, 정렬 방식, 요소의 배치 방법 등을 결정하는 데 사용된다. - 웹 문서의 내용(HTML)과 스타일(CSS)은 함께 웹 문서를 구성하는 요소이자 양식으로써 사용되지만, 서로의 역할은 완벽히 구분되어 있다. 따라서 CSS의 내용이 바뀌어도 웹 문서의 내용 자체에는 영향을 끼치지 않는다. 2. HTML 문서에 CSS 문서 연결하는 방법 - link 태그를 사용하는 방법 - 문서 내부에 style 태그를 작성하는 방법 - 각 태그에 style 속성을 지정하는 방법 HTML 문서의 CSS를 적용하는 기본 양식 선택자{ 속성명..