코딩공부중인블로그

font-familly 문자의 글꼴을 지정하는 속성입니다. 여러 단어이거나 한글 글꼴인 경우는 (' ')따옴표로 감싸고 여러 개의 글꼴을 (,)쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. ex) font-family:'돋움', Dotum, Arial, Helvetica, sans-serif; font-size, 단위의 고찰 문자의 글자 크기를 지정하는 속성입니다. 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. css에서 유용하게 사용하는 단위는 다음과 같은 것들이있습니다. px 해상도에 따라 상대적으로 달라지는 기본 단위입니다. ex) font-size: 12px; % 부모 요소의 글자 크기를 100% 기준으로 계산한 %단위입니다. ex) font-size:..

grid레이아웃 비교적 직관적이어서 다른 레이아웃보다 사전지식이 덜 필요합니다. 우선 만들어야 할 레이아웃을 먼저 스케치 해놓고 만드는것이 가장 편합니다. 일단 레이아웃 결과물을 먼저 가져와서 보여 주었습니다. 처음으로 해야할 것은 박스를 만들기 입니다. 저 그림에는 박스를 7개를 사용한것이 보입니다. 그러므로 "body" 부분에 ""의 부모박스 밑에 7개의 박스를 만들고 각각 id를 주었습니다. 두번째로 "head" 부분에 " 네번째로 부모박스인 "#wrap"에 "gird- template-areas"를 만들어 레이아웃을 테이블 형태로 만들어줘어야합니다. 그리고 가로(grid-template-columns),세로(grid-template-rows) 범위를 정해 주어야하는데 이것은 밑에 이미지와 css를..

flex 레이아웃 요소들이 포함된 부모 박스에 display: flex 를 선언하고, 안에 있는 요소들에게 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다. 다음 display: flex가 들어간 코딩으로 간단한 레이아웃을 만들어 보았습니다. 속성 flex flex는 세개의 요소 가 섞여 있습니다. flex-grow 자식 요소가 적거나 그 크기가 작아 공간이 남을 때 항목의 크기를 늘려 채워 주는 방법을 정의 합니다. 0 (기본값) 1 항목들이 모두 1이면 같은 크기임 양수 값을 높게 줄수록 더 늘어남 공간이 부족할 때는 어떤 값도 무의미 flex-shrink 자식 요소가 많거나 그 크기가 커서 공간이 부족할때 항목의 크기를 줄여 채워주는 방법을 정의 합니다. 0 공간이 부족해도 항목의 크기..

선택자(selector) ·선택자란 CSS로 UI 의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다. ·선택자의 종류는 type선택자, id선택자, class선택자, 전체선택자, 하위선택자, 자식선택자, 인접선택자, 형제선택자, 그룹 선택자, 속성 선택자 ,가상 클래스 선택자 ,가상 요소 선택자, 종속 선택자 , 선택자의 우선순위 가있습니다. ·CSS로 속성을 부여하는 형식은 다음과 같습니다. type선택자 선택자중 가장 간단한 선택자입니다. html문서의 태그 이름을 선택자로 사용할 수 있습니다. id선택자 ※html 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다. ※html 요소에id로 이름을 붙일 때에는 유일한 이름을 부여해야 하며, 다른..

float 블록 레벨 요소(Block-level Elements)는 원래 마크업을 할때 세로로 나열이 되지만, float을 이용하여 가로로 배치할수 있습니다. float은 레이아웃으 만들기 위한 필수 적인 속성 입니다. 우선 사진은 블록 레벨 요소 중 하나인 에 색깔과 크기를 주어 아래와 같이 여러개의 박스를 만들었습니다. 이처럼 세로로 블록 레벨 요소는 세로로 나열이 되기 때문에 이것을 자연스럽게 배치하기 위해 float을 사용합니다 . float의 속성값 에는 " left " 와 " right "가 있습니다. (자연스럽게 배치하고 싶은 요소에 넣으시면 됩니다.) ※left : 요소를 왼쪽에 배치하고 나머지 요소 들과 자연스럽게 배치 되도록 합니다. ※right : 요소를 오른쪽에 배치하고 나머지 요소..

ID 선택자 HTML 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다. HTML 요소에 "id"로 이름을 붙을 때는 유일한 이름을 부여 해야 하며, 다른 요소에 같은 id명을 주어서는 안된다. See the Pen Untitled by jhwangwoo (@jhwangwoo) on CodePen. 예제를 보면 p태그 중 id 가 'ctxt'인 요소만 색을 파란색으로 표시 하도록 하였습니다. 그리고 id가 'txt'인 p요소는 id만 주어졌을뿐 스타일에 따로 지정된 색이 없어 p요소에 처음 지정된 빨간색으로 표시가 되었습니다. ID 선택자 HTML 문서의 여러 요소 중 같은 이름을 갖는 요소들만 모아 따로 속성을 부여할 수 있습니다. HTML요소에 같은 이름을 부여..

내부 스타일시트 CSS를 HTML 문서 안에 태그로 기재 하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태. 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이때 스타일은 .css확장자를 가진 별도파일로 저장하고, HTML에소는 태그를 이용합니다. 내부 스타일시트는 그 스타일이 기술된 페이지만 적용 하지만, 외부 스타일시트는 그 스타일을 선언한 모든 HTML에 적용됩니다. @import CSS안으로 다른 CSS 파일을 불러들일 경우 사용합니다. 또한 어떤CSS 파일 안에 공통 CSS를 불러들일 경우에도 사용합니다. @import 는 공통으로 들어가야 할 스타일을 따로 저장 하여 다른 CSS에 삽입 시켜 사용할 수 있도록 해줍니다. 그러나 CSS 파..