html 썸네일형 리스트형 html5+css3 3일차 form이란? 아이디와 비밀번호를 입력하거나 로그인 버튼, 회원 가입 창등 사용자가 웹 사이트로 정보를 보낼수 있는 요소들 form 태그의 속성 form 태그는 몇 가지 속성을 통해 사용자가 입력한 자료들을 서버로 어떤 방식으로 넘길 것인지, 서버에서 어떤 프로그램을 이용해 처리할 것인지 지정한다. form 태그에서 action="search.php"로 지정했기에 사용자가 검색할 내용을 입력하고 검색 버튼을 클릭하면 그 값이 웹 서버에 있는 search.php 파일로 전송되어 검색이 처리된다. ----- 버튼을 클릭했을 때 새창(새 탭)을 여는 자바스크립트 함수를 실행시켰다. 학번 placeholder 속성 - 입력해야할것을 표시해준다. readonly 속성 - 읽기 전용 필드 만들기 이 필드의 내용은 .. 더보기 HTML5+css 웹 표준의 정석 2일차 이미지 내 컴퓨터의 이미지 파일 경로 지정하기 1. 웹문서 파일과 이미지 파일이 같은 경로에 있다면 src속성에는 간단히 이미지 파일의 이름만 있으면 됨. ex) 2.웹 문서가 있는 폴더에 하위 폴더를 만들고 그 폴더에 이미지 파일을 저장했다면 다음과 같다. ex) 이미지 크기 조정 --- 링크 a태그 href속성 - 링크 만들기 a 태그는 텍스트와 함께 사용하면 텍스트 링크가 되고 이미지와 함께 사용하면 이미지 링크가 된다. 텍스트 링크의 밑줄과 글자 색 바꾸기 위의 예제에서 보았듯이 텍스트 링크는 기본적으로 파란색인데 클릭한번 하고 살펴보면 보라색 그 다음은 빨간색 등등으로 변하는데 미리 변해줄려면 태그 전에 삽입해 css ---- target 속성 - 새 탭에서 링크 열기 앞에서 살펴본 link.h.. 더보기 Do it html5+css 웹 표준의 정석 1일차 태그와 태그의 차이점 위에서 확인한 것과 같이 눈으로 봤을 때 기능은 동일해보입니다. 하지만 자세히 알아보면 꾀나 큰 차이가 있습니다. 태그는 "하나의 문단을 묶어주는 태그"로 사용되기 때문에 문단이 끝나고 난 뒤에 줄이 바뀌는 것이고, 태그는 "단순 줄을 바꾸는 기능"만을 가진 태그라는 점입니다. 한 마디로 태그는 문단을 나누기 위한 목적으로 단지 태그가 끝나는 부분에서 줄이 바뀌는 기능을 포함하고 있을 뿐 단순히 줄을 바꾸기 위해서 사용하는 태그가 아니라는 점입니다. 하나의 문단이 가지는 범위를 지정할 수 있고 그 안에 포함 된 문단이 가지는 스타일을 CSS를 활용해 따로 설정을 할 수 있는 부가적인 속성을 지정해 줄 수 있는 태그입니다. 그에 비해, 태그는 단순히 강제적인 줄을 바꾸는 기능만을 가진.. 더보기 블록체인 5일차 영화사이트 만들어보기 오늘은 영화 메뉴판을 만들어보았다. input , label이 한쌍으로 묶이는데 input고유명사가 tab01이다. 맨 아래 주석처리된 부분에 입력하고 css에 (input ~item) 여기에 tab01과 item01단어가 html에 모두 있어야지 실행된다. 사진 넣고 h태그로 스즈메의 문단속 입력한후 span태그를 사용했는데 span의 기능은 보이지 않는 부모태그의 영역을 없애주는 태그이다. 그래서 밑으로 내려가지 않고 옆으로 계속 써갈수 있다. 예매율46.2%옆에 회색 bar가 있어서 span에다 class를 적용한후 bar라고 지칭하고 css에서 bar{border-right: 1px solid gray;}를 줬다. 그 다음 span안에 3.3k 테두리를 만들기 위해서 여기에도 class를 부여해줬.. 더보기 과제 이미지 박스 만들기 아래 사진은 일부분만 진행해본거 처음에 틀 잡는게 중요하듯이 1.먼저 3박스 모두 2.한 박스 3.이미지 / 오른쪽 맨상단 제목과 날짜/ 긴 글 /자세히 보기 시작해보자 div로 전체묶음 (가로로 긴 박스 3개를 감싸줄) 그 다음에는 가로로 긴 박스 한개 div를 또 생성해준후 (이건 박스 한개만 포함)후 이 div에는 flex라는 속성을 추가해주는데 이유가 세로로 떨어지지말고 가로로 나열되기 위함 1.그 다음 아래로 이미지를 넣어주고 넓이 200px ,높이 200px, 배경색 회색으로 지정 2.오른쪽 맨상단 제목과 날짜를 기입하기전 div로 다시 묶어준후 여기에도 flex를 추가해서 가로나열을 해준다. (위 사진안에 오른쪽 부분을 보면 flex창이 뜨는데 이걸 활용해준다.) 3. 또 div를 추가해줘서.. 더보기 블록체인 4일차 1.html 파일과 css파일 2개를 만들어주고 시작한다. !느낌표 입력후 link를 입력해서 css와 연동시킨후 href입력란에 점을 2개 붙이면 현재 폴더 아래의 파일들을 선택해줄수 있다. 점 한개는 현재 폴더내에서 선택가능(../) video태그를 입력후 src입력란에도 ../해서 비디오파일이랑 연동시키니 비디오파일도 비쥬얼 스튜디오 코드에 가져와줘야 한다. (controls 속성은 영상의 컨트롤 박스를 출력하고 / autoplay 속성은 영상이 불러와지면 바로 재생한다. / loop속성은 반복으로 영상을 보여주고 / muted 속성은 음소거의 역할을 한다.) 이제는 iframe으로 동영상을 불러와 볼건데 (유튜브 영상) iframe 입력후 src입력란에 유튜브 주소(맨 위창에 나오는)입력해주면 되.. 더보기 블록체인 3일차 스타일은 속성을 부여해준다. display에서 flex는 가로로 정렬 세로로 정렬을 시켜주는 블록의 기능을 한다. padding(태그 내부 여백), margin(외부의 여백) 문단정리를 할때는 div로 묶어주는게 나중에 정리가 편하다. *ctrl+a 후에 ctrl+k+f를 하면 전체 문단을 세로로 정리시켜줘서 태그 빼먹은 부분을 찾기에 용이하다. #은 id를 지칭하고 .은 class를 지칭한다. 아래처럼 똑깥은 내용을 많이 바꿔줘야할때 바꾸고 싶은 내용(같은 내용)을 선택후 ctrl+f한후 바꿀 대목을 기입하면 하나하나 안바꾸고 손쉽게 바꿔줄수 있다. div로 시작후 border 몇px후 solid까지 입력해줘야 테두리가 생성되고 width는 폭 margin은 간격을 띄워준다. 그다음 h1,h2갈수록 크.. 더보기 2일차 입사지원서 양식 만들어보기,영화 포스터 만들어보기 처음에 느낌표로 시작후 테이블세팅 전체큰틀 먼저 설정해주고 열 스타일 (col style은 테이블 가로의 폭을 설정해주는 값이다) *border collapse라는 속성은 떨어져 있는 선을 겹쳐준다. 이 세팅이 완료된 후에 tr안에 th 한세트로 만들어주면 한 행이 완성이된다. 위 사진의 입사지원서 같은 경우 세로로 행2칸 크기를 가지고 있으니 th에서 rowspan="2"을 추가해줘서 행2칸짜리를 만들어줄수 있다. 중간 실습의 스텝은 1.영화 제목 쓰고 2.영화의 감독 3.평점 4.줄거리 5.영화 포스터 처음에는 뭘 어떻게 시작하지?? 하고 감을 못잡았는데 강사님이 포스터 작성 스텝과정을 보면 영화 제목이 제일 중요하니 h1 그다음은 덜중요하니 h2,h3,h4...이렇게 나간후 줄거리는 p입력해서 나가.. 더보기 이전 1 2 다음
