본문 바로가기

웹개발

 (26)
내용 정리 1. 양식이란 ? 사용자의 입력을 처리하는 버튼, 텍스트, 선택 등을 의미한다. 2. 양식 제출 및 다양한 요청 버튼과 텍스트 입력창을 만들어도 아무런 action이 일어나지 않는다. 그 이유는 사용자의 인풋을 받는 양식이 필요하기 때문인데 인풋을 받으라는 코드는 바로 요소이다. Submit 브라우저가 요청하는 모습 하지만 form 요소를 사용해도 아무런 변화를 찾아볼 수 없다. 이런 이유는 동작 방식에서 찾아볼 수 있다. 위 코드에서 브라우저는 서버에게 action을 요청하고 이때 기본 방식은 GET이다. 서버로부터 action을 받아오는 동작을 실행하는 것이다. 하지만 위에 코드에서는 action을 /로 처리했고 이는 현재 index.html파일의 경로이다. 참고로 action은 브라우저가 서버에게 ..
프로젝트 요약 1강 - 프로젝트 설정 # css 아웃소싱 및 구글 폰트 연동 # css파일 아웃소싱: h1같이 계속 존재해야하는 요소, 기본 틀은 shared.css에 저장해서 link요소로 불러오기 2강 - 로고 추가 # a : void 요소이고 인라인 요소(블럭)임 따라서 다음 줄에 블럭 요소가 오면 수직배치됨. css로 바꾸는거 보다는 이럴 때는 div tag를 이용! [예시] Travel Goals 3강 - 요소의 위치 설정 # css 플랙스박스 : 요소의 위치 설정을 용이하게 하는 속성 # 플랙스 컨테이너 : 플랙스 박스들을 관리하는 부모요소 [예시] #container { display: flex; } 요소들의 부모요소를 잘 파악해서 부모요소에 적용해야한다. 개발자 도구를 들어가면 볼 수 있다. flex-d..
호스팅 & 배포 개념, 실습, favicon, 경로 용어를 정리하기 앞서 프론트엔드가 진행되는 과정을 알아야한다. step 1. 사용자가 주소창에 주소를 입력한다. step 2. 브라우저가 해당 주소에 연결된 정보를 통해 서버에 요청을 날린다. step 3. 서버는 브라우저의 요청에 응답한다. ( 배포된 html, css 코드를 전달 - 호스팅 ) step 4. 브라우저가 서버로부터 전달받은 코드를 실행한다. step 5. 웹페이지에 표시된다. 1. Deploying ( 배포 ) 란? html, css, javascript로 작성된 code를 서버에 옮기는 행위를 뜻한다. 2. hosting ? 서버에 저장된 코드를 사용자(브라우저)에게 제공하는 것을 의미 3. 실습생략 # nettify 보고 배포하고 도메인 만들기 가능 # 기본적으로 nettify에서 ..
[html, css 응용] 7. box-shadow 오늘 강의에서는 box-shadow 속성에 대해 알아보자! box-shadow는 말 그대로 박스그림자라는 의미이다. css 박스에 그림자를 값으로 설정하므로써 입체감과 웹사이트의 퀄리티를 높일 수 있다. 소스코드 li{ background-color: rgb(223, 136, 124); border-radius: 4px; margin: 32px; padding: 16px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); } # 위에 코드를 설명하자면 그림자에 대해 크기를 오른쪽으로 1px 아래쪽으로 1px 흐림정도를 4px 로 설정하고 rgba를 통해 그림자의 색상과 투명도를 설정한다. # rgba 는 rgb + 투명도이다. 실행결과 before after 입체감 뿜뿜.
[html, css 응용] 6. 마진 상쇄 이번 강의에서는 마진 상쇄에 대해 알아보자! 개발자도구를 보면 il에 margin을 30px로 설정했는데 요소들끼리 서로 마진이 겹쳐 60px가 아닌 30px로 나타나고 있다. 이를 마진상쇄라고 하며 마진상쇄가 일어나는 조건을 아래에 정리해 보겠다. 마진 상쇄 특징 1. block element와 block element 사이에서만 발생된다. 2. 인접 요소의 수직 마진에 대해서만 발생된다. 3. 수평, inline to block, inline to inline에서는 발생하지 않는다. 4. 인접한 두 요소의 마진이 서로 다를 때 마진 상쇄가 발생된다면 항상 큰 쪽이 우세하다. 5. display에서 inline-block은 마진 상쇄가 일어나지 않는다. 예시 1~5 모두 속성을 바꾸며 실습해보니 확인할..
[html, css 응용] 5. css - block, inline 이번 강의에서는 block element, inline element를 배워보자. html 요소중에는 크게 block 요소와 inline 요소가 있다. block 요소에는 p, h1 등이 있고 inline 요소에는 img, a 등이 있다. block요소는 특징은 full line, new line 이고 inline요소는 둘 다 해당되지 않는다. full line 이란 하나의 요소가 한 줄을 모두 사용하는 것을 뜻하고 new line은 여러 block요소들이 있으면 그만큼의 new line을 요구하는 것을 뜻한다. 예시) p가 차지하는 영역 vs a가 차지하는 영역 ( 파란 박스 ) inline의 주요 특징 1. top, bottom에 margin 속성이 적용되지 않는다. 2. padding을 적용하였을 ..
[html, css 응용] 4. css 선택자, 결합자 오늘은 선택자와 결합자에 대해 알아보았다. 둘 다 여러 요소를 선택할 때 사용하는 것으로 선택자는 앞에서 id와 #를 이용하는 방법으로 배웠다. 이번에는 class, 결합자 등을 통해 여러 요소에 css 규칙을 적용시키는 방법을 실습해보자. 1. 선택자 실습 : class를 이용하여 4개의 li중에 가운데 2개만 색상을 다르게 해보자. Tueday, January 2nd I'll Finish Section 3 Wednesday, January 3rd I'll Go To Seoul With Gy Girlfriend Thursday, January 4th Dive Deeper into HTML & CSS And Build More Complex WebSites Friday, January 5th Practi..
[html, css 응용] 3. css 박스 모델 html 요소는 모두 박스모양으로 이루어져 있다. 개발자 도구 (F12)를 통해 들어가보면 다음과 같이 그림 형태로 나타난다. margin : 공간에 대한 의미로 content의 바깥 공간에 대한 정의이다. padding : content의 내부 공간으로 실제 몸집이 커진다. border : content의 테두리이다. # padding과 margin 옵션을 1개 주면 4방향 모두 해당 px로 지정되고 옵션을 2개 주면 아래-위, 양옆 세트로 지정되고 옵션을 4개주면 위쪽부터 시계방향으로 px조정이 가능하다.

티스토리툴바