본문 바로가기

개발공부_Blog154

CSS - position 직접 보여주고 싶지만 이제 지쳤다. 한꺼번에 블로그를 올리는 건 너무 힘들다ㅋ # CSS position static 정적 위치 지정방식 relative 상대 위치 지정방식 fixed 고정 위치 지정방식 absolute 절대 위치 지정방식 sticky static + fixed 합쳐진 속성 1. 정적 위치 지정방식 static { position: static; } - 기본값 - HTML요소의 위치를 결정하는 기본적인 방식 - top, left, right, bottom값을 사용할 수 없다 - 단순히 웹페이지 흐름에 따라 차례대로 요소들의 위치를 결정하는 방식 2. 상대 위치 지정방식 ralative ( 상대값 ) { position: relative; left: 300px; top: 50px; } - .. 2021. 11. 27.
CSS - display 열심히 CSS에서 style을 주고 있었는데 가운데 정렬 하고 싶은데 text-align은 적용 안되고 그렇다고 아예 그 태그에 style이 적용 안되는 것도 아니고 ....... 빡 쳤을때 ....... 뒤늦게 알았지뭐야 display에 inline과 block속성 때문에 해당 되는게 있고 안되는 게 있다는걸 # 디스플레이 CSS Display : 웹페이지의 레이아웃을 결정하는 속성 1. block 디스플레이 속성값이 블록인 요소는 언제나 새로운 라인에서 시작하고 해당 라인의 모든 너비를 차지 * 대표적인 block 엘리먼트 : 2. inline - 디스플레이 속성값이 인라인인 요소는 새로운 라인에서 시작되지 않고 나란히 배치됨 * 대표적인 inline 엘리먼트 : - 너비도 해당 라인 전체가 아닌 해.. 2021. 11. 27.
CSS - background background style속성도 많이 쓰이는거 같은데 항상 단순한 것만 써서 그런지... background로 효과?를 주려고 하면 왠지 어렵게 느껴지는 부분이다 # CSS의 배경 다루기 background-color background-image background-repeat background-position background-attachment background background-size 1_background-color : HTML 요소의 배경색을 설정 2_background-image : HTML 요소의 배경으로 나타날 배경 이미지를 설정 배경 이미지는 기본 설정으로 반복(바둑판 형식)되어 나타남 선택자 { background-image: url ('배경 이미지 위치'); } 3_ba.. 2021. 11. 27.
CSS - text style 쓰는 듯 안쓰는 듯 하면서 자주 쓰이는 것들 내가 요즘 자주 하는 말 .... '아 이거 이런거 있었던 거 같은데.... 뭐였더라...'ㅋ CSS - TEXT다루기 color letter-spacing word-spacing text-align text-indent line-height text-decoration text-shadow text-transform font-variant text-overflow white-space overflow font-size font-family font-weight color 텍스트의 색상을 설정, 기본값은 검정색임 letter-spacing letter-spacing 텍스트 내에서 '글자 사이'의 간격을 설정할 때 안 녕 하 세 요 word-spacing wor.. 2021. 11. 27.
CSS - 선택자 선택자는 아주-우 중요하죠 내가 꾸미고 싶은 Tag에게 아주 멋지고 예쁜 style을 입혀줘야 하니까요! 1 CSS 선택자 전체 선택자 요소 선택자 ID 선택자 Class 선택자 그룹 선택자 하위 선택자(자손) 자식 선택자 인접 형제 선택자 일반 형제 선택자 속성 선택자 순서에 따른 가상 클래스 선택자 가상 요소 선택자 1_전체 선택자 : 스타일을 모든 요소에 적용 전체 선택자는 *기호를 사용 => *{ color: gray; } => 디테일한 스타일은 전체 선택자와 body에 적용한 스타일보다 우선시 됨 h2 { color: deepskyblue; font-weight: bold; } * { color: gray; } ---> 요소 선택자 ---> 전체 선택자 2_요소 선택자 : 특정 요소가 쓰인 모든.. 2021. 11. 27.
HTML - input 2 input fieldset 그룹 legend 그룹 제목 - 폼 요소를 그룹으로 묶을 때 사용 - fieldset의 제목을 만들 때 사용 label 라벨 폼 양식에 이름을 붙이는 요소. label 요소와 다른 요소를 연결하면 해당 영역이 넓어짐 (ex) radio에 해당하는 선택 버튼이 작아서 label을 이용해 넓혀줌 성별 남자 여자 select 선택상자 여러개의 옵션이 드롭다운 리스트로 되어 있으며 그 중에서 단 하나의 옵션만을 입력받을 수 있음. 요소를 통해 선택할 수 있는 아이템을 설정함 내용 (서버에 전달할 값) / (화면에 보이는 내용) textarea 여러줄 글상자 여러줄의 텍스트를 입력받는 글상자 datalist 데이터 목록 * label없으면 없는채로 나옴ㅋ 미리 지정된 옵션 목록을 보여줌.. 2021. 11. 27.
HTML - input 1 입력 상자 HTML에서는 다양한 타입의 input 요소를 사용하여 사용자로부터 입력을 받을 수 있다 입력 상자 text password radio checkbox file number range color data time datetime-local month week email url tel search 전송 버튼 bottom reset submit 다양한기능 label fieldset legend select textarea datalist 속성 size maxlength palceholder checked required readonly disabled 2 type 속성 >> input type의 속성들은 태그 안에서 그 역할을 더 정확히 수행할 수 있다 <.. 2021. 11. 27.
HTML - image / video파일 넣기 1 셀프 클로징 태그 이미지는 셀프 클로징태그이다 셀프 클로징태그? Self-Closing 은 원래 XHTML 에서 사용하는 문법이며, 엘리먼트를 꼭 slash를 이용하여 자체 닫기(self-closing) 해야 한다. 일부 태그에는 닫기 태그가 필요하지 않다. 엔딩 슬래시는 선택사항인가 HTML5 : 슬래시는 선택 사항이다. HTML4 : 슬래시는 기술적으로 유효하지 않다. 그러나 W3C의 HTML 유효성 검사기에서 허용된다. XHTML : 슬래시가 필요하다. 2 이미지 넣기 - src 특성은 필수이며, 포함하고자 하는 이미지로의 경로를 지정합니다. (이미지 소스 URL) - alt 특성은 이미지의 텍스트 설명이며 필수는 아니지만, 스크린 리더가 alt의 값을 읽어 사용자에게 이미지를 설명하므로, 접근.. 2021. 11. 27.
HTML - 구조, 서식/목록태그 뭐든지 한번으로 끝나는 건 없다 알고 있다고 생각했지만 볼 때마다 새로운 기분이다. 1 HTML의 전체 구조 html문서의 선언 html5 버전의 문서를 사용하겠다고 선언하는 것 HTML 속성을 나타냄 해당 요소(html)가 시작할 때 속성 or 추가옵션(lang_언어) 선택 *lang(언어)속성에 대한 웹 접근성에 대한 명시 스크린 리더에서 언어를 인식하여 자동으로 음성을 변환하거나 해당 언어에 적합한 발음을 제공할 수 있도록 함 (한국어=“ko”) 태그에 정보를 추가하기 위한 태그 1) charset 속성은 문자를 인코딩할 때 문자코드를 설정하는 역할을 지정 2) 우리나라 윈도우 기본 문자셋인 EUC-KR을 사용해도 되지만, 다국어로 인코딩 하기 위해서는 UTF-8 문자셋 사용을 권장함 모바일로 최적.. 2021. 11. 27.

티스토리툴바