IT with Life

데이터를 보기 편하게 하는 방법 2 이전 포스트 에서 각 행 별로 스타일을 적용했었는데요 이번 포스팅에서는 마우스를 가져갔을 때 색을 변경하는 방법을 설명하겠습니다. 스타일은 table,tr,td{ border:1px solid #000000; border-collapse:collapse; } tr.colored:nth-child(even){ background-color:#aaaaaa; color:#000000; } tr.colored:nth-child(odd){ background-color:#444444; color:#FFFFFF; } tr.colored:hover td{ background-color:#f3e9e9 !important; color:#303f39 !important; } 테이블은 테..

테이블에 열이 한두개가 아닐 경우에는 행이 길어지면 헷갈릴 때가 좀 있긴 합니다. 이럴 때 조금이라도 보기 편하게 만들어 주는 방법 중 하나가 각 행의 색을 다르게 주는 것입니다. 스타일과 클래스를 적용해서 간단하게 할 수 있습니다. 우선 스타일은 table,tr,td{ border:1px solid #000000; border-collapse:collapse; } tr.colored:nth-child(even){ background-color:#FFFFFF; color:#000000; } tr.colored:nth-child(odd){ background-color:#000000; color:#FFFFFF; } 요런 식으로 되어 있다고 하고 테이블이 테스트1-1 테스트1-2 테스트1-3 테스트1-4 테..

font-sze 는 문자의미 그대로 글자의 크기를 지정하는 속성입니다. font-size: 후에 나오는 속성에 따라 다양하게 이용할 수 있습니다. 속성값 medium, xx-small, x-small, small, large, x-large, xx-large, smaller, larger, 수치입력, initial, inherit 가 있습니다. medium, xx-small, x-small, small, large, x-large, xx-large, smaller, larger 이 값들은 브라우저 기본 값에 대한 상대적인 크기 입니다. 단어 뜻 그대로라서 별다른 설명은 필요가 없을 것 같네요. 수치입력 부분은 단위를 지정해서 입력을 해 주시면 됩니다. 12px, 15em 과 같이 지정을 하시면 됩니다. ..

html 에서 주로 쓰일 거 같은 style 속성 항목들을 정리하려고 합니다. 추후 하나둘 추가 될 것이고, 모든 항목들에 대해 다루지 못할 걸로 예상됩니다. 1. style 사용 법 크게 두가지로 볼 수 있습니다. 하나는 html 파일에서 태그에 직접 넣어서 사용하는 법이고 하나는 CSS 파일을 만들어서 클래스나 아이디를 지정해서 사용하는 방법입니다. 우선 html 태그 내에서 사용하려면 내용 과 같이 문자열 태그 안에 style 속성을 지정하는 방법입니다. 다른 하나는 CSS 파일을 만들고 #mycolor{ color:red; } 를 입력한 후 html 파일에서 CSS 파일을 링크 걸어 준 후, 문자열 태그를 입력 할 때 id 를 지정하는 방법입니다. 내용 #대신에 . 을 넣거나 아무것도 입력하지 않..

Visual Studio Code 1. html 의 기본 구조 : 해당 파일이 html 형식이라는 것을 나타내는 부분으로 전체 코드를 감싸는 형태가 됩니다. : 자바스크립트 파일을 불러 때, meta 태그를 사용할 때, 타이틀을 입력하고자 할 때 사용하는 부분으로 기본적으로 보여지지 않는 부분에 대한 선언 같은 것들을 주로 하게 됩니다. : 보여지는 부분, 본문 내용을 포함하는 태그입니다. 2. 문자열 관련 태그 a. div, p태그 p 태그의 경우 한 단락 정도로 생각을 하시면 편합니다. p 태그의 위아래로 빈 줄이 삽입이 되며, div 태그 내에 p 태그를 넣어 한 줄씩 글을 입력 하는 경우가 많습니다. div 태그는 영역을 구분한다는 느낌이 강합니다. 여백 부분을 따로 지정하지 않는 한 영역 밖에 ..