아옳옳의 코딩공부/아옳이의 html5 + css3 공부 (7) 썸네일형 리스트형 21-04-29 웹 css 선택자 정리 선택자 (중요한 것들만 정리 함 너무 많아 ) 전체 선택자 * * 태그 선택자 태그 h1 아이디 선택자 #아이디 #header ( 앞에 # 붙임) 글래스선택자 .클래스 .header ( 앞에 . 붙임) 후손 선택자 선택자 선택자 header h1 부정 선택자 선택자 :not(선택자) li:not(.item) 스타일속성 크기단위 단위 설명 % 백분율 단위 em 배수단위 (예 ; 1배 1em = 100% , 1.5배 1.5em = 150%) px 픽셀단위 색상단위 #000000 HEX 코드 단위 rgb rgb 색상 단위 가시속성(중요함) 화면에 보이는 방식 none 태그를 화면에 보이지 않게 block 태그를 블럭 형식으로 inline 태그를 인라인 형식으로 inline-block 태그를 인라인과 블럭 형식.. 21-04-29 웹 html5 태그 정리 공부를 하다니까 너무 순서가 없이 공부가 되는 기분이라 몇일째 어떻게 할까 생각해 봤는데 태그별로 정리하는게 좋을거 같다. 기본 html 작성 meta 웹 페이지 추가정보를 전달합니다. title 웹 페이지의 제목 script 웹 페이지에 스크립트 추가 style 웹 페이지에 스타일시트 추가 link 웹 페이지에 다른 파일을 추가 base 웹 페이지의 기본 경로를 지정 글자태그 제목 h1 ~ h6 첫번째로 큰 제목글자에서 6번까지 본문 p 본문 글자 태크 br 줄 바꿈 hr 수평 줄 태그 앵커 태그(링크걸때 사용) a 앵커 (하이퍼링크 걸때 사용 ) @ 샵은 빈 링크이다 링크 있으면 저 자리에 주소적어줌 글자 형태 b 굵은 글자 형태 i 기울어진 형태 ins 아래줄 그어진 형태 del 가운데 줄 그어진 .. 21-04-29 웹 html5 + css3 (4) 오늘은 새롭게 배운것 보다는 연습하는 시간을 갖은거라 지금까지 했던 것들 총 동원하여 과제를 풀어보도록 하자 이런 웹 페이지를 만들 것이다 . 코딩의 민족 넌 코딩할때가 제일 이뻐 코딩에 빠진 닭 주머니가 가벼운 당신의 마음까지 생각한 착한 가격 바로결제 코코 스시 주머니가 가벼운 당신의 마음까지 생각한 착한 가격 바로결제 코데리아 주머니가 가벼운 당신의 마음까지 생각한 착한 가격 바로결제 코가네 주머니가 가벼운 당신의 마음까지 생각한 착한 가격 바로결제 @font-face { src: url("../fonts/BMJUA_otf.otf"); font-family: BMJUA; /* 이름 정해주는것 나중에 이 이름으로 사용 가능하다 */ } * { font-family:BMJUA; box-sizing: b.. 21-04-29 웹 html5 + css3 (3) border : 1px (선크기 ) solid(선모양 ) blue (선색) 선모양 종류 : dashed - - - - - - 이걸로 그린 라인 dotted ..................... 이렇게 점으로 그린 선 solid 줄모양 border-left or right 등등으로 해당 부분만 값을 줄수도 있다 border : none 선을 없애 겠다 border-radius : 4px (픽셀만큼 라인이 모서리 둥굴게 만들어준다 ) 텍스트가 길어질때 사용하는 것 overflow : visible (넘쳐남 ) hidden (남은거 숨김 ) Scroll ( 크기 여부와 상관없이 스크롤 생성 ) auto ( 크기가 커지면 스크롤 생기고 아니면 안생김) background-color : blue (배경색 지정 .. 21-04-29 웹 html5 + css3 (3) 폰트 위 폰트들은 기본 제공 폰트들이다. 하지만 이런 폰트만 사용할게 아니라 우린 외부에 있는 폰트들도 사용하고 싶을때가 있을 것이다. 그때 무료로 이용할 수 있는 구글에 구글폰트 검색하면 나오는 제일 첫번째 사이트에 들어가면 폰트가 여러가지 나온다 홈페이지에서 필요한 폰트에 들어가면 이렇게 나온다 . 일단 링크로 걸어서 하는것 먼저 설명을 하겠다 1.원하는 폰트에 + 버튼을 눌러주면 장바구니에 담듯이 옆에 창이 열린다 ( 동시에 여러개도 가능 ) 그럼 2. 장바구니에 link부분부터 끝까지 복사하여 해드영역 메타 아래에 붙여 준다 Trying Out Different Fonts 그리고 나서 실제 적용 할때는 3번을 스타일에 해당하는 부분에 붙여 준다 . 다운로드 방법 다운로드를 받아와 내가 원하는 폴더.. 21-04-28 웹 html5 + css3 (2) 매일 코드를 넣고 새로운 태그나 새롭게 배우는 부분들이 있으면 추가하도록 하겠다~ (근데 이미 배운거 또 나오는 경우도 있을거 같으니.. .잘 걸러 봐야겠지? ㅋㅋ ) 아옳이 월드오브 워크래프트에 나오던 몬스터이다. 개구리를 닮은 몬스터로 울음소리가 아옳옳옳옳 하고 운다하여 이름은 아옳옳이다. 이것들의 리더는 멀록왕 아옳옳이다. 아옳옳 나무위키 어제배우지 않은것 몇가지가 있다. 바로 이미지 추가!! 태그로 이미지를 추가할 수 있다. 이미지를 불러 오는 방법은 두가지 있다. 첫번재 인터넷에 올라와있는 이미지 주소를 복사하여 넣는 방법과 폴더 지정해서 하는 방법이 있다. 이렇게 이미지 주소를 복사하여 붙여 줄수 있다 ( 옆에 width는 이미지의 좌우 크기 지정인데 하나만 넣게 되면 높이도 자동으로 지정된다.. 21-04-27 새로운 출발~ html5 + css3 오늘부터 html과 css 3 를 배우기 시작했다 ~ 자바 안드로이드 앱관련 공부하기도 바쁘지만 개발자라면 웹에 관련된 것도 어느정도는 알고 있어야 하는 것이기에 군소리 없이 공부하기로 ... ㅋㅋ Visual Studio Code 설치 code.visualstudio.com 홈페이지 들어가서 설치눌러 설치하면되고 모든 설정값은 기본값으로 놓고 설치 해도 무관하다 한국어로 변경하는 방법이다 1번 누르고 -> 2번에 korean Language Pack for Visual Studio Code 작성 -> 3 선택후 -> 4번 클릭 ( 지금은 내가 적용 해놔서 제거 이다 ) -> 마지막 아래에 다시 시작창 뜨면 다시시작하면 한글화 완료 시작에 앞서 html과 css 는 무엇일까? 비유를 들자면 안드로이드에서.. 이전 1 다음
