반응형 이과/HTML,CSS,JS20 CSS_속성,폰트,텍스트 안녕하세요 코딩초밥입니다 ㅇㅅㅇ CSS의 위치를 선택을했으면 디자인을 시작해야겠죠? 실습 TIP!!!!!! 코딩을 전체 복붙을 하신뒤 요소만 남기고 css요소들을 하나씩 대입해가면서 바뀌는 부분들을 확인해보세요!!! 그럼 차이점이 바로보이실겁니다. CSS의속성들 -출처:"인피니티북스" css 속성들을 보고 원하는 모습으로 바꾸려면 어떤 속성을 바꿔야할지 생각해봅시다. 색상표기법. 출처:"인피니티북스" 색상을 조정할때 4가지의 표기법으로 요소를 설정을할수있습니다 폰트의 속성 ·pt – 포인트 ·px - 픽셀 ·% - 퍼센트 ·em – 배수(scale factor) ·키워드 – xx-small, x-small, small, medium, large, x-large,xx-large 폰트 크기예제 par.. 2021. 5. 7. HTML_오디오,비디오 div, span 안뇽하세요 코딩초밥입니당 ㅇㅅㅇ html에 오디오랑 비디오가 안나오면 섭섭하겠죠? 오디오 비디오 및 코드쓸때 아무 구분없이 쭈룰루루루루루룱 쓰면 나중에 내가 쓰고도 힘들어지겠죠? 그러다가 나도힘들게알아보는 코드를 인수인계한다면 받는분은 눈물이 쭈루룰루룩일겁니다. 그래서 코드를 구분할수있는 div와 span을 알려드리도록하겠습니다 😘 ※오디오 활용 오디오를 넣어서 사이트가 켜지면 바로 음악이 나오게 할수있습니다. audio : 오디오삽입태그 src="oldpop.mp3" : 오디오 소스 파일 경로(url) autoplay : 자동재생 controls : 화면 제어기 보일것 속성 종류 ※오디오 파일의 종류. ·MP3 – 'MPEG-1 Audio Layer-3'의 약자로 MPEG기술의 음성 압축 기.. 2021. 5. 6. 반응형 웹디자인. 안녕하세요 코딩초밥입니다 ㅇㅅㅇ html과 css javscrip로 만들기만한다면 정말 웹사이트입니다. 안드로이드로 보이면 그 큰사이즈가 그대로 핸드폰으로보여서 해상도 부셔지거나 누르기 힘들것입니다. 그러면 사이즈 별로 디자인을 해놓으면 더 이쁘겠죠? 그래서 반응형 웹디자인을 해야합니다. 반응형 웹디자인. -출처: 인피니티북스 ※각 사이즈에 맞는 디자인을 구성해야합니다 반응형 웹을 위해 필요한 방법으로는 2가지로 나뉠수있습니다 1.뷰포트(viewport) 2.미디어 쿼리: css선택적용 기술입니다 오늘 할것은 미디어 쿼리로서 간단하게 말하자면 사이즈 별로 그 이미지를 만들어놓는것입니다 내 모니터가 겁나 크다 그러면 큰사이즈보여주고 핸드폰이나 작은 모니터면 작은사이즈로 디자인한거로 바꿔서.. 2021. 5. 3. CSS의혁명,FLEX 안녕하세요 코딩초밥입니다 ㅇㅅㅇ 웹앱을 만들려고했을때 저는 처음에 배치를 하는 과정이 안드로이드스튜디오와 달라서 힘들었는데요!(사실 실력이 부족..) CSS로 콘텐츠를 배치를 하려면 일일이 하나씩 배치를 하는 느낌이라서 꽤 힘들었습니다. 허나 이 FLEX 기능은 안드로이드스튜디오처럼 자식요소들의 배치를 부모요소가 결정을 합니다(한줄기의희망) 자 같이 알아보도록할까요? 안드로이드 스튜디오에서 작업하시다 오신분들에게 설명을 빠르게 드리기위해서는 방향지정에 관한 키워드입니다 눈에 익으시죠? 이렇게 생각하시면됩니다. orientation=flexdirection horizontal= row vertical= colcumn display의 한 요소인 flex는 자식요소들을 자동으로 inline-bl.. 2021. 5. 2. HTML_줄바꾸기,헤딩,수평선,리스트 안녕하세요 코딩초밥입니다 ㅇㅅㅇ 학습을할떄 기초가 탄탄해야 높이 쌓을수있는법이죠? html의 기본를 알아봅시당. 파이팅 😍 -참고 html은 에러가나도 그 글이 제대로 보이지않을뿐 에러가 나지않습니다. 그게 큰 장점이자 단점이라고할수있습니다 잘나오지않는다면 코드를 다시한번 봐주시길바랍니당 텍스트 표시 텍스트는 특별한 태그없이도 .. 안에서 표현할수있습니다 안녕하세요? 이렇게 코드를 쓴다고 하여도 결과는 띄워쓰기가 되지않습니다. 해딩 요소 글을쓰는데도 굵게 써서 헤드라인처럼쓰고싶을떄가있죠??? 이것이 heading 1 입니다. 이것이 heading 2 입니다. 이것이 heading 3 입니다. 이것이 heading 4 입니다. 이것이 heading 5 입니다. 이것이 heading 6 입니다. 단락 이렇게.. 2021. 5. 1. HTML에 대한 이해 안녕하세요 코딩초밥입니당!! ㅇㅅㅇ 요즘 비가 많이 오네요 모두 건강 조심하세용 😍😍 저번에 개발 방식에 대한 종류를 알아보았는데요 WebAPP을 만드는데 총 3가지의 계념이 필요한데요 HTML, CSS, JAVASCRIPT입니다. 자 HTML은 뭘까요? 우리가 HTML의 코드를 살펴보기 전에 HTML이 왜 필요하고 어떻게 만들어졌는지 알아보는 시간을 가지겠습니다 (알고 공부하면 이해가 더 빠르..겠지? 그러겠지? 그럴거야) 그냥 쭈우욱 흐름대로 읽어주시면 감사하겠습니다. 앱을 만들거나 작업을 한다고 가정해봅시다. 수많은 데이터들이 필요하다고 했을 때 우리는 무엇을 하나요? 하나하나 내 컴퓨터에다가 저장을 하나요? 제 컴퓨터 포함해서 어느 컴퓨터도 정보를 저장시키는 데에 한계점이 있을 겁니다. 그래서.. 2021. 4. 30. 이전 1 2 3 4 다음 반응형
