본문 바로가기

TIL

[TIL-9] 생활코딩 WEB2 CSS-12~15(완강) 12. 미디어 쿼리 소개 반응형 웹 : 화면의 크기에 따라 웹페이지 요소들이 반응하여 동작. 미디어 쿼리 : CSS 영역 안에 반응할 조건 설명(@media) 후, 반응할 내용 씀. @media(min-width:800px) { div{ display:none; } } 화면의 크기가 최소 800px(800px 이상)일 때 모든 div 태그가 화면에 표시되지 않는다. 13. 미디어 쿼리 써먹기 grid의 display를 block으로 하면 나란히 안 나오고 화면 전체 폭 차지. [오류 났던 것] #grid ul이라고 앞에서 선택자를 지정했던 부분을 미디어 쿼리 안에서 수정할 땐 그냥 ul이라고 하면 안되고 #grid ul이라고 그대로 가져와야 함. [못 고친 것] 유튜브 영상을 가져다놓은 페이지가 있는데,.. 더보기
[TIL-8] 생활코딩 WEB2 CSS-6~11 6. CSS 속성 스스로 알아내기 글자 크기 크게 : property는 font-size. 값의 단위는 px. 글자 가운데 정렬 : property는 text-align. 값은 center. 7. CSS 선택자의 기본 class 선택자 : 같은 것들 그룹핑해주는 기능. html 문법으로 태그 안에 class="saw"라고 해두고, css 영역에서 .saw라고 하면 saw라는 클래스에 해당하는 것들 선택됨. class="saw active"라고 클래스에 두개 이상의 값을 넣을 수도 있음. 띄어쓰기로 구분. id 선택자 그런데 적용될 우선순위를 지정해주려면 id="active"라고 해두고, css 영역에서 #active라고 씀. 그럼 id 선택자가 class 선택자를 이김. 같은 id 값은 한 번만 쓸 수 .. 더보기
[TIL-7] 생활코딩 WEB2 CSS-1~5 3. CSS의 등장 : 주석 처리 이 웹페이지에 있는 모든 a를 선택하여[선택자], 색깔(속성, property)을 검정(값, value)으로[효과/선언]. CSS 장점 코딩할 때 중복을 없앨수록 좋음. 웹페이지의 사이즈도 줄어들고 수정 편함. 효율적. 코드의 정보와 디자인 분리 가능. 4. CSS의 기본 문법 태그 : 선택자(selector) : 태그는 효과의 대상이 지정되어있지 않으므로 a{}라는 코드(선택자)가 추가로 필요했던 것. 속성 : 적용할 내용의 태그 안에서 style을 html의 속성으로 사용. style이라는 속성은 효과(declaration)를 지정함. 하나의 선택자에 대해 여러 개 효과 지정할 경우 ;(세미콜론)으로 구분. 더보기
[TIL-6] 생활코딩 WEB1-19~부록(완강) 19. 웹서버 운영하기 ~ 웹서버 설치 ~ 웹서버와 http ~ 웹서버와 웹브라우저의 통신 웹서버 아파치(apache) 이용 윈도우에서 아파치 설치하기 위해 bitnami wamp stack 검색. bitnami 다운. 설치된 bitnami manager 통해 웹서버 끄고 켤 수 있음. welcome 옆 "manage servers"탭에서 "apache web server"가 초록색이면 켜져있는 것. 켜져있어야 "go to application" 했을 때 "비트나미: 오픈 소스" 창 볼 수 있음. 주소창에 "localhost"라 돼있는데 "http://127.0.0.1/index.html"라고 쳐도 똑같은 페이지 나와야 함. 이 index.html은 아파치 파일 안에 존재. "htdocs(하이퍼텍스트 다.. 더보기
[TIL-5] 생활코딩 WEB1-12~18 12. 부모자식과 목록 리스트를 표현하는 가 자식태그라면 항목의 범위를 그루핑해주는 은 부모태그. : ordered list. 넘버링 됨. : unorderd list. 꿀팁 : 컨트롤 키 누르고 커서 클릭하면 여러 군데에 동시에 입력 가능. 13. 문서의 구조와 슈퍼스타들 : 최빈태그 본문을 설명하는 태그 : 웹페이지의 제목으로 설정. : 아톰 화면 하단에 보면 utf-8이라고 돼있는데 그런 방식으로 문서를 썼으니 읽을 때도 같은 방식으로 읽어야 오류 없음. 고위직 태그 본문은 로, 본문을 설명하는 태그는 로 묶어주기로 약속. 이 태그들보다 상위에 올 수 있는 유일한, 최고위직 태그 : 그리고 이 문서는 html 문서라는 뜻에서 맨 첫줄에 이라고 써줌. 14. HTML 태그의 제왕 : anchor, 닻.. 더보기
[TIL-4] 생활코딩 WEB1-6~11 6. 기본문법 태그 태그 : 설명해주는 것. 문법 : ... 굵게 표시 : ... 밑줄 표시 : ... 7. 혁명적인 변화 제목 : . 숫자가 작을수록 큰 제목. 태그 적용하면 줄바꿈도 해줌. 태그라는 게 뭔지만 알면 모르는 태그 검색해서 금방 알 수 있음. 이것도 지식이나 마찬가지! 8. 통계에 기반한 학습 지식이 있어야 이해하기 좋은 태그. 알고 있으면 좋은 것 구분. 가장 많이 쓰는 태그들, 창조성의 원천! 먼저 공부해야 할 것. 뒷 순위에 있는 것들은 알면 편리한 것. 9. 줄바꿈: br vs. p 줄바꿈 : . 닫아줄 필요 없음. 단지 빈 줄 하나를 추가하는 것. 여러 번 쓰면 공백이 넓어진다. 단락 : . 단락의 시작과 끝을 알려주기 위해 다른 태그들 처럼 닫아줘야 한다. 단락을 나누기 위해 .. 더보기
[TIL-3] 생활코딩 WEB1-1~5 이미 첫코딩을 결제해놨고 예전에 한번 들었으니 제대로 한번 완강하고 다른 강의들을 통해 개발 공부를 시작하려고 했다. 하지만 프로그래밍 언어로 공부를 시작하지 말라는 조언들도 있었고, 첫코딩은 자바와 파이썬을 다루는 강의라 나에게 필요한 공부와 조금 거리가 있다고 느꼈다. 그리고 무엇보다 조언대로 프로그래밍 언어 강의를 처음에 들으니 체계적이기는 하지만 재미가 없다ㅠㅠ 오히려 어서 개발 공부를 해보고 싶어서 근질근질한 이 마음과 열정을 식혀버리는 것 같다. 그래서 첫코딩 완강을 미뤄두고 생활코딩의 HTML 강의에 입문해보려고 한다! 4. 코딩과 HTML 어떤 쪽이 사람이 하는 일이고, 어떤 쪽이 기계가 하는 일인지 구분. 그리고 무엇이 원인이고 결과인지 추론. 어떤 명령어를 쓸 때는 적용될 내용의 시작과.. 더보기
[TIL-2] 베어유 첫코딩 13~15강 (CHAPTER 4) 클래스 : 내가 만든 변수 클래스는 여러 가지 고정된 구성품을 묶어주는 틀. 이 틀로 예시(인스턴스)들을 찍어낼 수 있다. 그 안에 구성품이 어떻게 정의되냐에 따라 각 예시들은 서로 달라진다. 보통 헷갈리지 않기 위해 영문 코딩에서 클래스는 첫 글자를 대문자로, 인스턴스는 소문자로 쓴다. 자바 class를 선언한 뒤 사용할 땐 다른 파일에서 한다. class 참치선물세트{ \n int 일반; \n int 고추; \n int 야채 \n } 참치선물세트라는 틀이 있고 그 안에 들어갈 수 있는 구성품은 일반, 고추, 야채가 있다. 참치선물세트 참01호 = new 참치선물세트(); \n 참01호.일반 = 2; \n 참01호.고추 = 1; \n 참01호.야채 = 3; 참치선물세트라는 틀을 찍어서 참01호라는 새로.. 더보기

티스토리툴바