web
-
[21.02.13] CSS 셋째 날WEB/study log 2021. 8. 29. 23:47
진도: ~수업을 마치며까지 4. 그리드-위에서 만든 웹페이지에 글을 나란히 배치하도록 끌어올리고 싶다면? -> 그리드 -여기서 새로운 html 태그 등장! 아무 의미 없는 정보를 담는 태그는 division의 약자인 div 태그 사용! (block level element) 아무 의미 없는 정보를 담는 태그는 span 태그 사용! (inline element) -display:grid; 다음에 grid-template-columns 를 써주면 하나의 컬럼에 써줄 수 있음 -> 150px라고 하면 고정적으로 저 부피를 갖게 되고, 1fr이라고 하면 현재 화면 전체를 쓰게 자동으로 조정하는 단위 (2fr 1fr이라고 하면 2:1 비율로 현재 화면의 크기에 맞춰 자동으로 조절됨 ->grid의 장점은 박스 안에..
-
[21.02.12] CSS 둘째 날WEB/study log 2021. 8. 29. 23:45
진도: ~박스 모델까지 1. css 속성 스스로 알아내기 -text size 키우고 싶으면 'css text size property' 등으로 검색해서 찾아볼 수 있다! -text center로 옮기고 싶으면 'css text center property' 등으로 검색해서 찾아볼 수 있다. 강의 중 배운 css 속성 정리 text-align:글자 배열 조정 (중간으로 옮기는 등...) font-size:글자 크기 조정 padding:컨텐츠와 테두리 사이에 여백을 주고 싶다면 margin:테두리와 테두리 사이에 여백을 주고 싶다면 border-bottom:박스(4면 테두리)가 아니라 아래(1면 테두리)에만 선 그어주고 싶다면 display:어떤 태그가 가리키는 범위를 완전히 바꾸는 중요한 속성! displ..
-
[21.02.11] CSS 첫째 날WEB/study log 2021. 8. 29. 23:44
진도: ~혁명적 변화까지 html만 쓰는 데에는 한계가 존재한다! -> "CSS"라는 새로운 언어의 등장 계기 -html과 달리, 웹에 대한 정보(a, p, h1 태그와 같은...) X-> 디자인에 관한 내용 O html과 css는 완전히 다른 언어기 때문에 html 파일이 css가 쓰인다는 것을 알 수 있도록 선언해줘야 함 ->웹페이지에 css 삽입하는 2가지 방법 존재한다! style 태그를 사용한다 -> "선택자"=이 웹페이지에 주고 싶은 효과를 누구에게 줄 것이냐 선택! style 속성을 사용한다 = 원하는 특정 태그 내에 직접 넣어준다 1번 style태그를 사용하는 경우엔 head 태그 내에 style이라는 css 태그를 넣어준다 그리고 그 사이에 a{ color:red }를 적어주면, '이 h..
-
[21.01.03] HTML 둘째 날WEB/study log 2021. 8. 29. 23:42
진도: ~수업을 마치며 3까지 웹 호스팅과 웹 서버 시스템 프로그래밍과 컴퓨터 구조 및 시스템에서 열심히 배웠듯이, client는 server와 여러가지를 주고 받으며 상호작용한다. 웹의 경우에는 html을 호출하고 주는 경우다. 그리고 server에 의해 내 컴퓨터에 있는 문서를 전 세계가 볼 수 있도록 할 수 있다. 그런 server의 역할을 누가 하느냐에 따라 web hosting과 web server로 나눌 수 있다. web hosting의 경우는, 웹 호스팅 업체와 같은 회사에 맡기는 것으로 비교적 쉽다는 장점이 있다. 단적으로 github가 그 예시다. 두 번째로 web server는 사용자가 직접 그 역할을 하는 것이다. 이 방법은 까다롭고 어렵고 컴퓨터를 계속 커놔야 한다는 단점이 있으나,..
-
[21.01.02] HTML 첫째 날WEB/study log 2021. 8. 29. 23:41
진도: ~웹사이트 완성까지 HTML의 장점 1.쉽다 2.중요하다 3.Public Domain이다(저작권 X) html 문법은 기본적으로 태그와 태그를 보충해주는 속성으로 이루어진다. 태그는 150개 이상이 있지만, 자주 사용되는 태그는 한정되어 있기 때문에 그것만 알아둬도 충분하다! 태그 설명 strong-글씨를 진하게 표시한다 u-밑줄을 치고 싶다 heading(h1, h2, h3...)-숫자가 작을수록 글씨의 크기와 진하기↑, 줄바꿈 O p-단락(paragraph) 표시 (더 간격을 두고 싶다면 style="margin-top:40px" 등 css 문법으로 가능) br-줄바꿈 img-사진 업로드 (올리고 싶은 사진의 주소를 src="~~" 에 넣는다) li-목록 표시 ol-ordered list 자동..