본문 바로가기

css

 (9)
비전공에서 취업까지!! [27화] css 실기2편 40% 필기40% 태도점수20%!! -입니다.- 안녕하세용 SsunDev에옹! 오랜만이죠? 맞아요 제가 드디어 생에 첫 코로나에 걸려보았지 뭐에요? 그래서 잠깐 쉬었습니다 ㅎㅎ 왜! 모 ! 쉴 수도 itzy! 모! 겸사겸사 할게 좀 많아져서 잠시 쉬었습니다! SsunDev가 보고싶었다면 쏴리 질러!!! 자 그래서 이번시간엔 드디어 그동안 저희가 배웠던 HTML + CSS 을 통하여 그럴싸한 홈페이지를 하나 같이 만들어보겠습니다! 후 정말 길어질것만 같군요! 자 우선 homePage.html, homePage.css 두 페이지를 만들고 각각 안에 뼈대를 기입해 주도록 합시다! 이번에 저희가 만들어볼 페이지는 이런 페이지입니다! 뭔가 2000년대 홈페이지같죠? 네 이런 페이지를 만들고 예쁘게 꾸미는게 프론트 개발자의 할 일입니다! 백앤드는 꾸밀줄 몰라!!..
비전공에서 취업까지!! [26화] float 의 문제점 -입니다.- Hi im SsunDev im a boy you are a girl nice to meet you zito 후 유식해보이려고 영어를 써 보았습니다. 영어를 원어민급으로 잘하고싶은 썬데브입니다. 저번에 배웠던 float 의 문제점에 대해서 알아보고자 합니다. 앞서 소오올직히 float는 요즘엔 잘 사용하지 않는 기술이기도 해서 알아만 둡시다람쥐 css13.html, css13.css로 html, css를 요로코롬 만들어봅시다 내용물은 이제 다 아실거라고 믿습니다. 대충 float: left 박스 두개 예쁘게 정사각형으로 만들고 색칠도해주고 선도 만들어주고 두 float박스를 담는 배경도 하나 장만해주고 아실거라 믿습니두! 그럼 바로 alt + b!! 자 잘 만들어진거 같긴 한데 뭔가 이상합니다 각 상자가 ..
비전공에서 취업까지!! [21화] CSS 그동안 배운것을 활용편!! 그럴싸한 게시판을 만들어보자! -입니다.- 안녕하세요 SsunDev입니다 예의라면 제가 꽉 잡고 있숨다! 모자를 받아드릴 끄아요? 게시판을 만들어드릴 끄아아요? 오늘은 저와 함께 드디어 그럴싸한 페이지를 한번 만들어 보겠습니다. 기나긴 싸움이 될것만 같군요... 오늘 만들어볼 페이지는 이런식으로 게시판 페이지를 만들어 보려고 합니다. 마우스를 올리면 해당 게시글 목록이 노랗게 바뀌는 기능도 넣구요! 어떻게 만들지 살짝 감이 잡히시나요? 한번 시작해 보도록 하겠습니다. html과 css 파일 만들고 내용물 채워주시고 시작해 보도록 하겠습니다. 페이지를 만드실 때 보통은 이렇게 페이지의 전체를 감싸는 div를 하나 두고 시작합니다. 이를통해 해당 홈페이지의 width 나 정렬을 명시해 줄 수 있기 때문입니다. wrap 이나 컨테이너등등 추후에 알아보..
비전공에서 취업까지!! [17화] CSS 초 스피드로! 문단,글자 꾸며보자! -입니다.- 안녕하세요 SsunDev입니롤 가만 생각해보니 CSS는 너무 작고 세세한것에 너무 많은 힘을 쓰기엔 앞으로 다가올 거대한 프리저sql이랑 마인부우java 셀javascript 브로리spring 이 너무 쎄기 때문에 CSS에서는 약간 힘을 빼고 가볍게 상대하는게 좋겠다는 결론이 나왔습니다 후후 자 오늘은 빠르게 가 봅시다!!! 두말하면 잔소리죠? html 만들고 뼈대 블라블라 CSS 파일 블라블라 @charset 블라블라 그리고 안에 내용물 이런식으로 블라블라 link 블라블라 입니다! 은 인라인 속성 는 블록속성이라고 예전에 스치듯 말씀드렸는데요 그래서 span은 옆에 붙고 div는 아래로 줄바꿈이 일어납니다. 그 말인즉슨 span은 영역을 가지지 못하고 div는 일정한 영역을 가집니다. 정도만 알고 앞..
비전공에서 취업까지!! [15화] CSS 선택자3탄! 패트와매트를 선택하자 형제선택자, 속성선택자! -입니다.- Jab Jab Jap Punch Hook 미자 아줌마!!! 배에 힘 안줬다!!!!! 후..... 복싱을 배우고 한마리 거친 야수가 되어가는 SsunDev입니다 평일에 일과 운동과 블로그를 병행하니 피곤해 죽겠습니다. 유툽을 보다보면 저보다 더 열심히 살고계시는 선배님들을 보면 게으름 피우지 말아야지 하면서도 어째서인지 침대에서 등을 땔 수가 없는 제가 미워집니다. 각설하고 오늘은 선택자 마지막! 형제 선택자와 속성 선택자, 그리고 나머지에 대해서 배워보도록 하겠습니다. 역시나 또 뭐 아시죠? html , css 파일 두개 만들고 향상된 뼈대 딱 박고 css기본 charset 뙇 박고!! jab jab jab punch hook!! 내용물을 이렇게 한번 채워보겠습니다. 이제 뭐가형제고 뭐가 부모자식관계인지..
비전공에서 취업까지!! [13화] CSS 선택과 집중! 선택이 중요합니다 선택! SsunTech!!! -입니다.- Ssun녕하세요 안Dev입니다. 요즈음 감정이 가득 차서 조금만 눌러도 터져버리는 SsunDev입니다. 후.. 여러분들은 선택을 잘 하셔야합니다. 몇일전에 후회할 선택을 해버려서 망가진 하루를 삽니다 ㅋㅋ 각설하고 오늘은 선택자 라는것을 배워보도록 하겠습니다! 지난시간에는 CSS 파일을 분리하는 것 까지 배웠습니다. 그렇다면! 이제 HTML 페이지에 존재하는 테그들을 분리된 CSS 파일에서 어떻게 찾아서 저녀석은 빨간색으로 이녀석은 초록색으로 저녀석은 보라색으로! 하고 지목해서 바꿀 수 있을까요? 그래서 오늘 배워볼건 바로 선택자입니다! 일단 기본적으로 CSS 를 정의하는 기본적인 방법은 선택자 { 속성: 속성값;} 입니다. 예를들어서 p테그를 선택하고자 한다면 p { 속성: 속성값;} 입니다. 또 여러..
비전공에서 취업까지!! [12화] CSS 첫 도약! 난 미적 감각이 정말 없는데... -입니다.- 안녕하세요 SsunDev 임둥. 우리는 이제 CSS라는걸 배워볼겁니다 간단하게 설명드리자면 CSS는 html코드를 예쁘게 꾸미는 작업입니다. 전 미술쪽에 정말 소질이 없습니다 그래서 화면을 창의적으로 예쁘게 꾸미는것에 있어서 참 애를 먹습니다. 물론 여기도 좋은 해결책이 있어서 나중에 설명드리겠습니다! 먼저 CSS의 정의부터 알아보겠습니다. CSS ( Cascading Style Sheet ) -cascading : ‘계단형’ 의 의미로 스타일 적용에 특정도, 또는 우선순위가 있고 우선 순위가 정해지는 것이 계단식 스타일 시트라는 의미 입니다. 말이 어렵죠? 쉽게 설명하자면 한 파일 안에 꾸미기를 여러개 쓰면 계단식으로 마지막것으로 정의된다 입니다. 정의는 그렇다 치고 사실 저희가 전에 배운 html 파..
비전공에서 취업까지!! [2화] 첫 발을 내딛어보자! VSCode!!! -입니다.- 안녕하세요 SsunDev입니다. 오늘은 드디어 사전설명을 끝내고 코드라도 한줄 짜보겠습니다! 앞으로 개발자가 되실 여러분이 주의해야할점이 있습니다. 바로 개발을 하는 컴퓨터의 이름입니다! 컴퓨터 이름을 한글로 지정하신분들 이 있으실겁니다 [SsunDev의싸고느리지만무겁고소중한컴퓨터*~*v] 이런식으로 한글이름으로 설정하시게되면 추후 프로그램들이 한글을 못읽고 어버버거리는 에러가 생길 수 있습니다. 따라서 본인의 컴퓨터 이름을 영어로 바꿔주심이 좋습니다. 왠만하면 띄어쓰기나 특수문자없이 그냥 쌩영어가 좋은것 같습니다(개인적인생각입니다.) 방법은 그렇다고 하네요 저는 [제어판]에서 [시스템]을 클릭하니 그안에 [이 PC의 이름 바꾸기] 라는 버튼이 있었습니다. 아!! 참고로 전 Mac은 안써봐서 잘 모릅니다..

티스토리툴바